javascript轮播图算法

<div id="content_img1"><ul id="img1"><li><img src="img/5.jpg"/></li><li><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li><li><img src="img/5.jpg"/></li><li><img src="img/1.jpg"/></li></ul><span class="mouseover" style="margin-left: 300px;">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div><div id="content_img2"><ul id="img2"><li><img src="img/5.jpg"/></li><li><img src="img/1.jpg"/></li><li><img src="img/2.jpg"/></li><li><img src="img/3.jpg"/></li><li><img src="img/4.jpg"/></li><li><img src="img/5.jpg"/></li><li><img src="img/1.jpg"/></li></ul><span class="mouseover" style="margin-left: 300px;">1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>

*{margin: 0;padding: 0;list-style: none;}span{width: 20px;height: 20px;display: block;background-color: blanchedalmond;border: 1px solid black;float: left;text-align: center;line-height: 20px;z-index: 1;cursor: pointer;margin: 120px 8px 0 0;}span.mouseover{background-color: orange;}#content_img1{position: relative;width: 470px;height: 150px;border: 2px black solid;margin: 30px auto;overflow: hidden;}#img1{position: absolute;top: 0px;left: -470px;z-index: -1;width: 700%;height: 150px;}#img1>li{width: 470px;height: 150px;float: left;}#content_img2{position: relative;width: 470px;height: 150px;border: 2px black solid;margin: 30px auto;overflow: hidden;}#img2{position: absolute;top: -150px;left: 0px;z-index: -1;width: 470px;height: 700%;}#img2>li{width: 470px;height: 150px;}

window.onload=function(){var cont_img1=document.getElementById("content_img1");var spannum1=cont_img1.getElementsByTagName("span");var img1=document.getElementById("img1");var cont_img2=document.getElementById("content_img2");var spannum2=cont_img2.getElementsByTagName("span");var img2=document.getElementById("img2");   //向左轮播图的span"按钮"鼠标经过事件   for(var i=0;i<spannum1.length;i++){spannum1[i].index=i;spannum1[i].onmouseover=function(){for(var p=0;p<spannum1.length;p++){if(spannum1[p]==this){spannum1[p].className="mouseover";}else{spannum1[p].className="";}}clearTimeout(img1.timer1);now=this.index;scrollimg1(img1,spannum1); }}   //向左轮播的主函数调用scrollimg1(img1,spannum1);   //向上轮播图的span"按钮"鼠标经过事件for(var i=0;i<spannum2.length;i++){spannum2[i].index=i;spannum2[i].onmouseover=function(){for(var p=0;p<spannum2.length;p++){if(spannum2[p]==this){spannum2[p].className="mouseover";}else{spannum2[p].className="";}}clearTimeout(img2.timer1);nows=this.index;scrollimg2(img2,spannum2); }}    //向上轮播的主函数调用scrollimg2(img2,spannum2);}   var now=1; function scrollimg1(obj,spannum1){ if(obj.offsetLeft<=-(obj.children.length-1)*obj.children[0].offsetWidth){//达到极限的计算位置，既是最后一个图就马上扯回初始位置 now=0; obj.style.left=-(++now)*obj.children[0].offsetWidth+"px"; }else{ Move(obj,-obj.children[0].offsetWidth*(++now),"left",5,30);//否则图片进行向左运动的缓冲动画 } for(var i=0;i<spannum1.length;i++){ spannum1[i].className=""; } spannum1[(now-1)%spannum1.length].className="mouseover"; obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调，实现无限循环的图片轮播 scrollimg1(obj,spannum1); },3000); }  var nows=1; function scrollimg2(obj,spannum2){ if(obj.offsetTop<=-(obj.children.length-1)*obj.children[0].offsetHeight){//达到极限的计算位置，既是最后一个图就马上扯回初始位置 nows=0; obj.style.top=-(++nows)*obj.children[0].offsetHeight+"px"; }else{ Move(obj,-obj.children[0].offsetHeight*(++nows),"top",5,30);//否则图片进行向左运动的缓冲动画 } for(var i=0;i<spannum2.length;i++){ spannum2[i].className=""; } spannum2[(nows-1)%spannum2.length].className="mouseover"; obj.timer1=setTimeout(function(){//每3秒钟进行函数的回调，实现无限循环的图片轮播 scrollimg2(obj,spannum2); },3000); }function Move(obj,target,stylename,average,cycle,continuefunction){参数类型:(对象，目标值，改变的样式属性，缓冲系数(速度与大小成反比)，周期时间(速度与大小成反比),回调函数(可有可无)) clearInterval(obj.timer); obj.timer=setInterval(function(){if(stylename=="opacity"){var offvalue=Math.round(parseFloat(getStyle(obj,stylename))*100);var speed=(target-offvalue)/average; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(speed==0){clearInterval(obj.timer);if(continuefunction) continuefunction(); }else{obj.style[stylename]=(offvalue+speed)/100;obj.style.filter="alpha(opacity:"+(offvalue+speed)+")"; }}else{var offvalue=parseInt(getStyle(obj,stylename));var speed=(target-offvalue)/average; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(speed==0){clearInterval(obj.timer);if(continuefunction) continuefunction(); }else{obj.style[stylename]=offvalue+speed+"px"; }}},cycle);}function getStyle(obj,stylename){//对象样式属性大小获取函数if(obj.currentStyle){return obj.currentStyle[stylename];}else if(getComputedStyle(obj,false)){return getComputedStyle(obj,false)[stylename];}}