幻灯片无缝滑动(无需重新设置下标)

代码的效果可以直接看文章底部的演示地址,之前的滑动幻灯片我写的有一个小小的bug就是当到了最后一个节点,又需要重新回到第一个节点。从最后回到第一个节点。这个过程浪费了时间。并且不友好。现在我每执行一次,就把写个回调函数,DOM操作把第一个放在最后一个,这样就变成无缝幻灯片了。

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><style>*{margin:0;padding:0;}div{width: 600px;height: 300px;overflow: hidden;position: relative;margin:0 auto;}ul{position: absolute;left:0;top:0;}li{width: 600px;height: 300px;float: left;}</style></head><body><div id="zd"><ul><li style="background:#ff00ff"></li><li style="background:#ff0010"></li><li style="background:#0000ff"></li></ul></div><script>var oul=$("zd").getElementsByTagName("ul")[0],oli=oul.getElementsByTagName("li"),timers=null,timer=null,i=0,oliW=oli[0].offsetWidth;oul.style.width=oli.length*oliW+"px";function $(id){return document.getElementById(id);}function getClass(obj,name){if(obj.currentStyle){return obj.currentStyle[name]//IE}else{return getComputedStyle(obj,false)[name]//IE}}function Stratmove(obj,json,funEnd,callback){clearInterval(obj.timer);obj.timer=setInterval(function(){for(var attr in json){var bStop=true,cuur=parseFloat(getClass(obj,attr)),speed=0;if(attr=="opacity"){cuur=Math.round(parseFloat(getClass(obj,attr))*100);}else{cuur=parseFloat(getClass(obj,attr));}speed=(json[attr]-cuur)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(cuur!=json[attr]){bStop=false;}if(attr=="opacity"){obj.style["opacity"]=(cuur+speed)/100;obj.style["filter"]="alpha(opacity="+cuur+speed+")";}else{obj.style[attr]=Math.round(cuur+speed)+"px";}if(bStop){clearInterval(obj.timer);callback();}if(funEnd)funEnd();}},30)}var arr=[];timers=setInterval(function(){Stratmove(oul,{"left":-oliW},null,calls);},3000);function calls(){arr.push(oli[0]);oul.removeChild(oli[0]);oul.appendChild(arr[0]);arr.length=0;oul.style.left=0;}</script></body></html>演示地址:

,没有创造的生活不能算生活,只能算活着。

幻灯片无缝滑动(无需重新设置下标)

相关文章:

你感兴趣的文章:

标签云: