<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,ol{ list-style: none;}
.wrapper{
width: 670px;
height: 240px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
ul{
position:relative;
}
ul li{
position:absolute;
top:0;
left:0;
}
ol{
position: absolute;
right: 0;
bottom: 10px;
width: 190px;
}
ol li{
float: left;
width: 20px;
height: 20px;
margin: 0 5px;
text-align: center;
border-radius: 50%;
cursor: default;
background-color: #abc;
}
ol li.current{
background-color: pink;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
</head>
<body>
<div class="wrapper">
<ul id="box">
<li style="z-index: 6;"><img src="images/1.jpg" alt=""/></li>
<li style="z-index: 5;"><img src="images/2.jpg" alt=""/></li>
<li style="z-index: 4;"><img src="images/3.jpg" alt=""/></li>
<li style="z-index: 3;"><img src="images/4.jpg" alt=""/></li>
<li style="z-index: 2;"><img src="images/5.jpg" alt=""/></li>
<li style="z-index: 1;"><img src="images/6.jpg" alt=""/></li>
</ul>
<ol style="z-index: 10;" id="uu">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
</div>
</body>
</html>
<script src="sport.js"></script>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var oulist = $('box').children;
var olist = $('uu').children;
var index = 0;
var timer = setInterval(autoPlay,2000);
function autoPlay(){
index++;
if(index >= oulist.length){
index = 0;
}
for(var i = 0;i<oulist.length;i++){
startMove(oulist[i],0,'opacity');
olist[i].className = '';
}
olist[index].className = 'current'
startMove(oulist[index],1,'opacity');
}
</script>
sport.js
function startMove(obj,target,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = parseFloat(getStyle(obj,attr));
var speed = 0;
if(attr === 'opacity'){
speed = target-current>0?0.1:-0.1;
}else{
speed = (target - current)/10; //
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
if(target == current){
clearInterval(obj.timer);
}else{
if(attr === 'opacity'){
obj.style[attr] = current+speed;
}else{
obj.style[attr] = current+speed+'px';
}
}
},20)
}
//获取元素的属性
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
//针对两种情况来进行一下整合
效果
eight.gif
