没事写个幻灯片玩了一下，开始没有问题，挺好的，后来我把页面最小化了，然后再最大化之后，整个效果就错了，应该是id为ppt的滚动距离错了，不知道怎么回事，有人碰见过类似的问题吗？
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>幻灯片</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} .pptWrap{ position:relative; width:800px; height:280px; background:#f2f2f2; margin:100px auto; overflow:hidden;} .pptWrap img{ display:block;} #ppt{ height:280px; display:block; position:absolute; left:0; top:0; width:800px;} #ppt li{ float:left;} .bot{ position:absolute; width:100%; height:30px; text-align:right; color:#000; bottom:0; left:0; z-index:100;} .bot a{display:inline-block; height:18px; width:18px; font-size:14px; color:#fff; text-align:center; line-height:18px; border:1px solid #f4f4f4; background:#6CF; margin:5px 10px 0 0; text-decoration:none;} .bot a.active{ border:1px solid #fff; color:#6CF; background:#FF9;} .bg{ opacity:0.5; background:#000; position:absolute; bottom:0; left:0; width:100%; height:30px; z-index:99;} </style> </head> <body> <div class="pptWrap" id="pptWrap"> <ul id="ppt"> <li><img src="images/01.jpg" /></li> <li><img src="images/02.jpg" /></li> <li><img src="images/03.jpg" /></li> <li><img src="images/04.jpg" /></li> <li><img src="images/05.jpg" /></li> </ul> </div> </body> </html> <script type="text/javascript"> window.onload=function(){ var now=0; var timer=null; var wrap=document.getElementById("pptWrap"); var ppt=document.getElementById("ppt"); var aLi=ppt.getElementsByTagName("li"); var step=aLi[0].offsetWidth; var num=aLi.length; ppt.style.width=step*num+"px"; var oDiv=document.createElement("div"); var oDivbg=document.createElement("div"); oDivbg.className="bg"; wrap.appendChild(oDivbg) oDiv.className="bot"; for(var i=0;i<aLi.length;i++){ var aA=document.createElement("a"); if(i==now){ aA.className="active"; } aA.innerHTML=i+1; aA.setAttribute("href","#"); oDiv.appendChild(aA); } wrap.appendChild(oDiv) //生成按钮，且给按钮添加点击滚动效果 var aa=wrap.getElementsByTagName("a"); for(var i=0;i<num;i++){ (function(n){ aa[n].onclick=function(){ for(var j=0;j<num;j++){ aa[j].className=""; } now=n; aa[n].className="active"; move(ppt,-step*now); } })(i) } //鼠标移上计时器关闭 wrap.onmouseover=function(){ clearInterval(timer); } //鼠标移开后计时器开启 wrap.onmouseout=function(){ timer=setInterval(function(){ for(var j=0;j<num;j++){ aa[j].className=""; } aa[now].className="active"; move(ppt,-step*now); now++; if(now==num){ now=0; } },2000) } //默认鼠标移开 wrap.onmouseout(); //运动框架 function move(obj,target){ var timer=null; clearInterval(timer); var speed=parseInt((target-obj.offsetLeft)/10); timer=setInterval(function(){ if(obj.offsetLeft==target){ clearInterval(timer); }else{ if(speed<1){ apeed=1; } obj.style.left=obj.offsetLeft+speed+"px"; } },30) } } </script>
问题找到了，是因为计时器是公用的，但是也不应该是这样子的吧，但是计时器一旦放在obj上面就不会这样了
下面是正确的代码，其实上面的错误是出在运动框架之上的，
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>幻灯片</title> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} .pptWrap{ position:relative; width:800px; height:280px; background:#f2f2f2; margin:100px auto; overflow:hidden;} .pptWrap img{ display:block;} #ppt{ height:280px; display:block; position:absolute; left:0; top:0; width:800px;} #ppt li{ float:left;} .bot{ position:absolute; width:100%; height:30px; text-align:right; color:#000; bottom:0; left:0; z-index:100;} .bot a{display:inline-block; height:18px; width:18px; font-size:14px; color:#fff; text-align:center; line-height:18px; border:1px solid #f4f4f4; background:#6CF; margin:5px 10px 0 0; text-decoration:none;} .bot a.active{ border:1px solid #fff; color:#6CF; background:#FF9;} .bg{ opacity:0.5; background:#000; position:absolute; bottom:0; left:0; width:100%; height:30px; z-index:99;} </style> </head> <body> <div class="pptWrap" id="pptWrap"> <ul id="ppt"> <li><img src="images/01.jpg" /></li> <li><img src="images/02.jpg" /></li> <li><img src="images/03.jpg" /></li> <li><img src="images/04.jpg" /></li> <li><img src="images/05.jpg" /></li> </ul> </div> </body> </html> <script type="text/javascript"> window.onload=function(){ var now=0; var timer=null; var wrap=document.getElementById("pptWrap"); var ppt=document.getElementById("ppt"); var aLi=ppt.getElementsByTagName("li"); var step=aLi[0].offsetWidth; var num=aLi.length; ppt.style.width=step*num+"px"; var oDiv=document.createElement("div"); var oDivbg=document.createElement("div"); oDivbg.className="bg"; wrap.appendChild(oDivbg) oDiv.className="bot"; for(var i=0;i<aLi.length;i++){ var aA=document.createElement("a"); if(i==now){ aA.className="active"; } aA.innerHTML=i+1; aA.setAttribute("href","#"); oDiv.appendChild(aA); } wrap.appendChild(oDiv) //生成按钮，且给按钮添加点击滚动效果 var aa=wrap.getElementsByTagName("a"); for(var i=0;i<num;i++){ (function(n){ aa[n].onmouseover=function(){ for(var j=0;j<num;j++){ aa[j].className=""; } now=n; //alert(now) aa[now].className="active"; move(ppt,-step*now); } })(i) } //鼠标移上计时器关闭 wrap.onmouseover=function(){ clearInterval(timer); } //鼠标移开后计时器开启 wrap.onmouseout=function(){ timer=setInterval(function(){ for(var j=0;j<num;j++){ aa[j].className=""; } aa[now].className="active"; move(ppt,-step*now); now++; if(now==num){ now=0; } },2000) } //默认鼠标移开 wrap.onmouseout(); //运动框架 function move(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var cur=obj.offsetLeft; var speed=cur<target?Math.ceil((target-cur)/7):Math.floor((target-cur)/7); if(obj.offsetLeft!==target){ obj.style.left=obj.offsetLeft+speed+"px"; }else{ clearInterval(obj.timer); } },30) } } </script>