js之图片轮换显示(横着显示)

预实现效果:

 

图片横着轮流显示,js代码:

 1 <script language="javascript" type="text/javascript"  >
 2 function picExchange(divPicName,td1Name,td2Name,conprev,connext) 
 3 {
 4     var speed=50;//图片从左到右的速度
 5     var time=3000;//向前,向后按钮点击后恢复时间
 6     var timeOut;
 7     var divPic=document.getElementById(divPicName);
 8     var td1=document.getElementById(td1Name);
 9     var td2=document.getElementById(td2Name);
10     divPic.style.display="block";
11     td1.children[0].style.width=160*td1.children[0].children.length;
12     td2.innerHTML=td1.innerHTML;
13     var PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);
14     divPic.onmouseover=function() {clearInterval(PicEx)}
15     divPic.onmouseout=function() {clearInterval(PicEx);PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);}
16     //两个控制按钮
17     document.getElementById(conprev).onclick=function() 
18     {
19         clearInterval(PicEx);
20         divPic.scrollLeft=(divPic.scrollLeft/160-divPic.scrollLeft/160%1-1)*160;
21         if(timeOut)clearTimeout(timeOut);
22         timeOut=setTimeout(function(){clearInterval(PicEx);PicEx= setInterval(function(){picExchangeEx(divPic,td1,td2);} ,  speed);},time);
23     }
24     document.getElementById(connext).onclick=function() 
25     {
26         clearInterval(PicEx);
27         var left=divPic.scrollLeft/160-divPic.scrollLeft/160%1+1;
28         var imgNum=td1.children[0].children.length;
29         if(left==imgNum){
30             divPic.scrollLeft=0;
31             left=0;
32         }
33         if((left-1==imgNum-4)&&timeOut)
34             divPic.scrollLeft=(imgNum-4)*160;
35         else
36             divPic.scrollLeft=left*160;
37         if(timeOut)clearTimeout(timeOut);    
38         timeOut=setTimeout(function() {clearInterval(PicEx);PicEx=setInterval(function(){picExchangeEx(divPic,td1,td2);},speed);},time);
39     }
40 }
41 function picExchangeEx(obj,obj1,obj2)
42 {
43     if(obj2.offsetWidth-obj.scrollLeft<=0){
44         obj.scrollLeft=0;
45     }
46     else{
47         obj.scrollLeft++;
48     }
49 }
50 </script>