<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0;padding:0;}
img{vertical-align: top;}
.box{width: 500px;height: 200px;border: 1px solid #ccc;margin: 100px auto;padding: 7px;position: relative;}
.box li{list-style: none;}
.screen{width: 500px;height:200px;position: relative;overflow: hidden;}
.screen ul{position: absolute;width: 3000px;left: 0;top:0;}
.screen li{float: left;overflow: hidden;}
.box ol{position: absolute;right: 10px;bottom:10px;line-height: 20px;text-align: center;}
.box ol li{width: 20px;height: 20px;float: left;background: white;border: 1px solid #ccc;cursor:pointer;margin-left: 10px;}
.box ol li.current{background:yellow;}
</style>
<script type="text/javascript">
window.onload = function() {
var box = document.getElementById('box');
var ul = document.getElementById('ul');
var ullis = ul.children; //获取ul下的所有子节点
ul.appendChild(ul.children[0].cloneNode(true));//克隆第一个节点到并追加到最后
var ol = document.createElement('ol'); //创建ol节点
box.appendChild(ol); //追加到box节点后面
for(var i=0;i<ullis.length-1;i++) { //动态生成小方块
var li = document.createElement('li');
li.innerHTML = i+1;//给li 加文字
ol.appendChild(li);
}
ol.children[0].className = 'current'; //默认第一个选中
var ollis = ol.children; //获取ol下所有子节点
//动画部分
for (var i=0;i<ollis.length;i++) {
ollis[i].index = i;//获得当前第几个小li的索引号
ollis[i].onmouseover = function() { //鼠标放上选当前小方块
for (var j=0;j<ollis.length;j++) {
ollis[j].className = '';
}
this.className = 'current';
animate(ul,-this.index*500);//参数1,谁动画,2走多少
//当前索引号为主
square = key = this.index;
}
}
var timer = null;
var key = 0;
var square = 0;
timer = setInterval(autoplay,1000);
function autoplay(){
key++;//先++
if (key>ullis.length - 1) { //后判断
ul.style.left = 0; //迅速调回
key = 1; //因为第6张就是第一张 所有下次从第2张开始
}
animate(ul,-key*500);//再次执行
square++;
if (square>ollis.length - 1) {
square = 0;
}
for (var i=0;i<ollis.length;i++) {
ollis[i].className = '';
}
ollis[square].className = 'current';
}
//鼠标经过停止定时器
box.onmouseover = function() {
clearInterval(timer);
}
box.onmouseout = function() {
timer = setInterval(autoplay,1000);
}
}
function animate(obj,target) {
clearInterval(obj.timer); //先清楚定时器
var speed = obj.offsetLeft < target ? 15 : -15;//用来判断 加 还是 减
obj.timer = setInterval(function(){
var result = target - obj.offsetLeft;//因为他们的差值不会超过5
obj.style.left = obj.offsetLeft + speed + 'px';
//如果差值不小于15说明到位置了
if (Math.abs(result)<=15) {
clearInterval(obj.timer);
//有5像素差,直接跳目标位置
obj.style.left = target + 'px';
}
},30)
}
</script>
</head>
<body>
<div class="box" id='box'>
<div class="screen">
<ul id="ul">
<li><img src="./img/1.jpg" width="500" height="200" /></li>
<li><img src="./img/2.jpg" width="500" height="200" /></li>
<li><img src="./img/3.jpg" width="500" height="200" /></li>
<li><img src="./img/4.jpg" width="500" height="200" /></li>
<li><img src="./img/5.jpg" width="500" height="200" /></li>
</ul>
</div>
</div>
</body>
</html>
