<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul{list-style: none}
.banner{width: 800px;height: 400px;margin:100px auto;position: relative;overflow: hidden;}
.banner .imgs{position: absolute;top: 0;left: 0;right: 0;width:4800px;height: 400px;}
.banner .imgs li{width: 800px;height: 400px;float: left;}
.banner .btn{display: none;cursor:pointer;}
.banner .left{position: absolute;top:50%;margin-top:-100px;width: 60px;height: 200px;text-align: center;font-size: 50px;line-height:200px;color: white;background-color: rgba(0,0,0,0.5);left: 0;}
.banner .right{position: absolute;top:50%;margin-top:-100px;width: 60px;height: 200px;text-align: center;font-size: 50px;line-height: 200px;color: white;background-color: rgba(0,0,0,0.5);right: 0;}
.banner .dots{position: absolute;bottom:0;left:50%;width: 300px;height: 50px;margin-left:-150px;cursor:pointer;}
.banner .dots>li{float: left;width: 20px;height: 20px;border: 1px solid black;border-radius: 50%;background-color:rgba(0,255,255,0.2);margin:15px 19px;}
.banner .dots li.dot1{background-color: #fff};
</style>
</head>
<body>
<div class="banner">
<ul class="imgs">
<li ><img src="img/1.jpg" width="800" height="400"></li>
<li ><img src="img/2.jpg" width="800" height="400"></li>
<li ><img src="img/3.jpg" width="800" height="400"></li>
<li ><img src="img/4.jpg" width="800" height="400"></li>
<li ><img src="img/5.jpg" width="800" height="400"></li>
</ul>
<ul class="btn">
<li class="left"><</li>
<li class="right">></li>
</ul>
<ul class="dots">
<li class="dot1" index="0"></li>
<li index="1"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
</ul>
</div>
<script src="public.js"></script>
<script>
var banner = document.querySelector(".banner");
var imgs = document.querySelector(".imgs");
var w = imgs.children[0].clientWidth ; //当前banner的宽度
var i=0,j,len = imgs.children.length; //当前图片的索引
var btn = document.querySelector(".btn");
var dots = document.querySelector(".dots");
var auto = true;
var flag = true;
console.log(len);
var timerId;
imgs.appendChild(imgs.children[0].cloneNode(true));
function move(){
if(i==len+1){
imgs.style.left = 0;
i=1;
}
if(i==-1){
imgs.style.left = -len*w+"px";
i=len-1;
}
//改变小点
for(var k=0;k<len;k++){
dots.children[k].className="";
}
j=i;
if(j==len){
j=0;
}
dots.children[j].className="dot1";
animation(imgs,"left",-i*w,400,function(){
clearTimeout(timerId);
if(auto){
timerId = setTimeout("move(i++)",2000);
}
flag = true;
});
}
timerId = setTimeout("move(i++)",2000);
imgs.onmouseout = function(){
auto = true;
timerId = setTimeout("move(i++)",2000);
}
imgs.onmouseover = function(){
auto = false;
clearTimeout(timerId);
}
banner.onmouseover = function(){
btn.style.display = "block";
}
banner.onmouseout = function(){
btn.style.display = "none";
}
var left = btn.children[0];
left.onclick = function(){
if(flag){
flag = false;
clearTimeout(timerId);
timerId = setTimeout("move(i--)",0);
}
}
var right = btn.children[1];
right.onclick = function(){
if(flag){
flag=false;
clearTimeout(timerId);
timerId = setTimeout("move(i++)",0);
}
}
dots.onclick = function(eve){
eve = eve || window.event;
var target = eve.target || eve.srcElement;
if(target.tagName =="LI"){
var index = target.getAttribute("index");
i=index;
clearTimeout(timerId);
timerId = setTimeout(move,0);
}
}
</script>
</body>
</html>
