*{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;}
.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;}
.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};
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){//len为图片的宽度5 拷贝一个就要加1就是6
imgs.style.left = 0;//移动到第六张,然后让其返回0
i=1;//当宽度为0的时候,把1的值赋给i;就是第二张,因为最后一张是拷贝的第一张
}
if(i==-1){//移动到第一张时,跳到倒数第二张,就是最后一张
imgs.style.left = -len*w+"px";//就是没有拷贝的原来几张图片的长度
i=len-1;//就是把他的索引给i,因为开始是0,故减1
}
//改变小点
for(var k=0;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"); console.log(index) i=index;//把他的自定义参数传给i clearTimeout(timerId); timerId = setTimeout(move,0); } } /*封装的动画函数 // 执行动画函数 function animation(ele,attr,end,time,cb){ var style = getStyle(ele,attr); //"8.33px" var start = parseFloat(style); //当前元素当前属性的当前状态值 var step = (end-start)/(time/(1000/60)); //每次变化的量 var dw = style.replace(start,""); //得到单位 function move(){ //每次变化 start+= step; ele.style[attr] = start+dw; // 当step大于0的时候,说明一直进行++操作 // 当step小于0的时候,说明一直进行--操作 if(step>0?start>=end:start<=end){ ele.style[attr] = end+dw; //纠正超界的情况 clearInterval(timer); if(cb){ cb(); } } } var timer = setInterval(move,1000/60); return timer; } */