cute倩影O_o
2018-10-30 14:27
var container = document.getElementById("container"); var list = document.getElementById("list"); var buttons = document.getElementById("buttons").getElementsByTagName("span"); var prev = document.getElementById("prev"); var next = document.getElementById("next"); var index = 1;//显示小圆点 var animated = false; var interval=2000; var timer; function animate(change){ animated=true; var newleft=parseInt(list.style.left)+change; var time=100;//位移总时间 var interval=50;//位移间隔时间 var speed=change/(time/interval);//每次位移量 function go(){ if((speed < 0 && parseInt(list.style.left)>newleft)||(speed > 0&&parseInt(list.style.left)<newleft)){ list.style.left=parseInt(list.style.left)+speed+"px"; setTimeout(go,interval); } else{ list.style.left=newleft+"px"; if(newleft>-590) { list.style.left= -5310+"px"; } if(newleft<-5310) { list.style.left=-590+"px"; } animated=false; } } go(); } function showbutton() { for (var i = 0; i < buttons.length ; i++) { if( buttons[i].className == "on"){ buttons[i].className = ""; break; } } buttons[index - 1].className = "on"; } function play() { timer = setTimeout(function () { next.onclick(); play(); }, interval); } function stop() { clearTimeout(timer); } //左箭头 prev.onclick=function(){ if(index==1){ index=8; } else{ index -=1; } showbutton(); if(animated==false){ animate(590); } } //右箭头 next.onclick=function(){ if(index==8){ index=1; } else{ index +=1; } showbutton(); if(animated==false){ animate(-590); } } //小圆点点击事件 for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { if (animated) { return; } if(this.className == "on") { return; } var myIndex = parseInt(this.getAttribute("index")); var change= -590 * (myIndex - index); animate(change); index = myIndex; showbutton(); } } container.onmouseover = stop; container.onmouseout = play; play(); }
问题在代码里的数字不符,图片宽600 不是590 ,按钮只有 5个,不是8 个
焦点图轮播特效
65296 学习 · 611 问题
相似问题