程序代码如下：<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>就是在运行过程中前一张图片滑过去之后 另一张图片并没有马上跟过来 然后就留了一点空白，等前一张图片完全消失后 后面一张图片才突然冒出来，不知道为什么会出现这种情况，求助，谢谢。
添加回答
举报
0/150
提交
取消