程序代碼如下：<style>*{ margin:0; padding:0;}#container{ height:220px; width:650px; position:relative; overflow:hidden; margin:0 auto;}#container ul{ position:absolute; top:0; left:0;}#container ul li{ list-style:none; float:left; }#container ol li{ list-style:none; float:left; height:20px; width:20px; background-color:#F9C; margin-left:10px; text-align:center; cursor:pointer; border:1px solid #F06;}#container ol { position:absolute; bottom:15px; right:20px; z-index:500;}#container ol .active{ background-color:#C09;}</style><script>window.onload=function(){ var odiv=document.getElementById('container'); var abtn=odiv.getElementsByTagName('ol')[0].getElementsByTagName('li'); var oul=odiv.getElementsByTagName('ul')[0]; var now=0; for(var i=0;i<abtn.length;i++) { abtn[i].index=i; abtn[i].onclick=function() { now=this.index; tab(); } } function tab()? ?{ ? for(var i=0;i<abtn.length;i++) { abtn[i].className=""; } abtn[now].className='active'; startMove(oul,{left:-650*now});? ?}? function next()? { ?now++; ?if(now==abtn.length) ?{ ?now=0; ?} ?tab();? }? var timer=setInterval(next,2000);? odiv.onmouseover=function()? { ?clearInterval(timer);? }? odiv.onmouseout=function()? { ?timer=setInterval(next,2000);? }} ?//以下是一個動畫封裝函數function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }var alpha=30;function startMove(obj,json,fn){ var flag=true; clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json) { var icur=0; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); } else{ icur=parseInt(getStyle(obj,attr)); } var speed=(json[attr]-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur!=json[attr]){ flag=false; } ? ? ? ? ? ?if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; } else{ ? ? ? ?obj.style[attr]=icur+speed+'px'; } } ? ?if(flag) { clearInterval(obj.timer); if(fn) { fn(); } } },30) }</script></head><body><div id="container">? <ol >? ? <li class="active">1</li>? ? <li>2</li>? ? <li>3</li>? ? <li>4</li>? ? <li>5</li>? </ol>? ? ? <ul>? ? ? ? <li><img src="images/a.png"/></li>? ? ? ? <li><img src="images/b.png"/></li>? ? ? ? <li><img src="images/c.png"/></li>? ? ? ? <li><img src="images/d.png"/></li>? ? ? ? <li><img src="images/e.png"/></li>? ? ? </ul> ?</div></body></html>就是在運行過程中前一張圖片滑過去之后 ? 另一張圖片并沒有馬上跟過來 ? 然后就留了一點空白，等前一張圖片完全消失后 ? 后面一張圖片才突然冒出來，不知道為什么會出現這種情況，求助，謝謝。
哪位大神幫看看 這個輪播圖的問題出在哪？
哎狐狐
2016-08-03 16:18:41
