幻灯片缓冲效果
思路
1、需要2个函数，第一个为自动播放函数，第二个为变换方式函数
2、鼠标移入div自动播放，鼠标移出div停止自动播放
3、缓冲效果的话需要计算外层UL的top值（offsetTop）判断是否等于index*aImg[0].offsetHeight的高度，如果等于的话，就是切换完成，如果不等于的话让变换的iSpeed=(index*aImg[0].offsetHeight-oUl.offsetTop)/10
4、Math.ceil与Math.floor经常用到Math.ceil是向上取整数，一般用在大于零的时候例如Math.ceil(12,1)结果为13，Math.floor向下取整数，一般用在小于零的时候例如Math.floor(-12.1)为-13；
<!doctyle html> <html> <head> <meta charset="utf-8"> <title>自动播放--轮播图</title> <style type="text/css"> body,div,ul,li{margin:0;padding:0;} ul{list-style-type:none;} body{background:#000;text-align:center;font:12px/20px Arial;} #box{position:relative;width:492px;height:172px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;} #box .list{position:relative;width:490px;height:170px;overflow:hidden;} #box .list ul{position:absolute;top:0;left:0;} #box .list li{width:490px;height:170px;overflow:hidden;} #box .count{position:absolute;right:0;bottom:5px;} #box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;} #box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;} #tmp{width:100px;height:100px;background:red;position:absolute;} </style> <script type="text/javascript"> window.onload=function() { var oBox=document.getElementById("box"); var oList=oBox.getElementsByTagName("ul")[0]; var aImg=oBox.getElementsByTagName("img"); var oUl=document.createElement("ul"); var attr=[]; var index=0; var timer=playTimer=null; var bOrder=true; oUl.className="count"; for (var i = 0; i < aImg.length; i++) { attr.push("<li>"+(i+1)+"</li>"); }; oUl.innerHTML=attr.join(""); oBox.appendChild(oUl); aBtn=document.getElementsByTagName("ul")[1].getElementsByTagName("li"); for (var i = 0; i < aBtn.length; i++) { aBtn[i].index=i; aBtn[i].onmouseover=function() { index=this.index; cutover(); //console.log(index*aImg[0].offsetHeight); } } cutover(); //鼠标移入停止自动播放 oBox.onmouseover=function() { clearInterval(playTimer); }; //鼠标移出自动播放 oBox.onmouseout=function() { autoPlay(); } function cutover() { for(var i=0;i<aBtn.length;i++) aBtn[i].className=""; aBtn[index].className="current"; show(-(index*aImg[0].offsetHeight)); } function autoPlay() { playTimer=setInterval(function() { bOrder?index++:index--; index>=aBtn.length-1&&(index=aBtn.length-1,bOrder=false); index<=0&&(index=0,bOrder=true); cutover() },2000) } autoPlay(); function show(itarget) { clearInterval(timer); timer=setInterval(function() { var iSpeed=(itarget-oList.offsetTop)/10; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); oList.offsetTop==itarget?clearInterval(timer):oList.style.top=oList.offsetTop+iSpeed+"px"; },30) } } </script> </head> <body> <div id="box"> <div class="list"> <ul> <li><img src="img/01.jpg" width="490" height="170"></li> <li><img src="img/02.jpg" width="490" height="170"></li> <li><img src="img/03.jpg" width="490" height="170"></li> <li><img src="img/04.jpg" width="490" height="170"></li> <li><img src="img/05.jpg" width="490" height="170"></li> </ul> </div> </div> </body> </html>
