js图片向右一张张滚动效果实例代码

样式
代码如下:

       #div_left{float:left;width:60px;height:86px;}
       #starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px solid red;float:left;}
       #starScroll #contentScroll{width:500%}
       #starScroll #ScrollOne{float:left;}
       #starScroll #ScrollOne a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
       #starScroll #ScrollOne img{width:204px;height:188px;border:0px;}
       #starScroll #ScrollTwo{float:left;}
       #starScroll #ScrollTwo a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
       #starScroll #ScrollTwo img{width:204px;height:188px;border:0px;}
       #div_right{float:left;width:60px;height:86px;}
       .arrow{background:url(p_w_picpaths/arrow.png) no-repeat;cursor:pointer;height:86px;width:60px;cursor:pointer;display:block;margin-top:50px;}
       .prev{background-position:left top;}
       .prev:hover{background-position:left bottom;}
       .next{background-position:right top;}
       .next:hover{background-position:right bottom;}

html代码
代码如下:

<div>
   <div id="div_left">
       <span id="btn_left" class="arrow prev"></span>
   </div>
   <div id="starScroll">
       <div id="contentScroll">
           <div id="ScrollOne">
               <a href="#" title="1"><img src="p_w_picpaths/1.jpg" /></a>
               <a href="#" title="2"><img src="p_w_picpaths/2.jpg" /></a>
               <a href="#" title="3"><img src="p_w_picpaths/3.jpg" /></a>
               <a href="#" title="4"><img src="p_w_picpaths/4.jpg" /></a>
               <a href="#" title="5"><img src="p_w_picpaths/5.jpg" /></a>
               <a href="#" title="6"><img src="p_w_picpaths/6.jpg" /></a>
               <a href="#" title="7"><img src="p_w_picpaths/7.jpg" /></a>
               <a href="#" title="8"><img src="p_w_picpaths/8.jpg" /></a>
           </div>
           <div id="ScrollTwo"></div>
       </div>
   </div>
   <div id="div_right">
       <span id="btn_right" class="arrow next"></span>
   </div>
</div>

JS代码
代码如下:
unity3d http://www.unitymanual.com/
   <script type="text/javascript">
var Scroll=(function(){
   return function(){
       var starScroll = document.getElementById("starScroll"),
           ScrollOne = document.getElementById("ScrollOne"),
           aCollection = ScrollOne.getElementsByTagName("a"),
           aLength = aCollection.length,
           ScrollTwo = document.getElementById("ScrollTwo"),
           btn_left = document.getElementById("btn_left"),
           btn_right = document.getElementById("btn_right");
       var Width = 204,Current = 1,Rate = 7,TimeTimeout=1000,TimeInterval=10,MarginRight=9;
       var SInterval=null,STimeout=null;
       var flag=true;
       function ScrollLeft(){
           var CountWidth = Current*Width+Current*MarginRight,
               SLeftPara=starScroll.scrollLeft;
           if(ScrollTwo.offsetWidth-SLeftPara==0){
               starScroll.scrollLeft=0;
               Current=0;
           }
           if(CountWidth-SLeftPara==0){
               Forward();
           }
           else{
               var v = Math.round((CountWidth-SLeftPara)/Rate);
               v = v<1 ? 1 : v;
               SetScrollLeft(SLeftPara+v);
           }
       }
       function SetScrollLeft(scrollleft){
           starScroll.scrollLeft=scrollleft;
       }
       function Init(){
           flag=false;
           SInterval=setInterval(ScrollLeft,TimeInterval);
       }
       function Forward(){
           clearInterval(SInterval);
           Current++;
           flag=true;
           STimeout = setTimeout(Init,TimeTimeout);
       }
       btn_right.onclick=function(){
           if(flag){
               clearTimeout(STimeout);
               Init();
           }
       }
       function ScrollRight(){
           var CountWidth = Current*Width+Current*MarginRight,
               SLeftPara = starScroll.scrollLeft;
           if(CountWidth-SLeftPara==0){
               Forward();
           }
           else{
               var v = Math.round((CountWidth-SLeftPara)/Rate);
               v = v>-1?-1:v;
               SetScrollLeft(SLeftPara+v);
           }
       }
       btn_left.onclick=function(){
           if(!flag){
               return;
           }
           flag=false;
           clearTimeout(STimeout);
           if(Current==1){
               SetScrollLeft(ScrollTwo.offsetWidth);
               Current=aLength+1;
           }
           Current-=2;
           SInterval = setInterval(ScrollRight,TimeInterval);
       }
       if(aLength>0){
           starScroll.scrollLeft=0;
           ScrollTwo.innerHTML = ScrollOne.innerHTML;
           STimeout = setTimeout(Init,TimeTimeout);
       }
   }
})();
Scroll();
   </script>