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(images/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;}

　　<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="images/1.jpg" /></a>

　　<a href="#" title="2"><img src="images/2.jpg" /></a>

　　<a href="#" title="3"><img src="images/3.jpg" /></a>

　　<a href="#" title="4"><img src="images/4.jpg" /></a>

　　<a href="#" title="5"><img src="images/5.jpg" /></a>

　　<a href="#" title="6"><img src="images/6.jpg" /></a>

　　<a href="#" title="7"><img src="images/7.jpg" /></a>

　　<a href="#" title="8"><img src="images/8.jpg" /></a>

　　</div>

　　<div id="ScrollTwo"></div>

　　</div>

　　</div>

　　<div id="div_right">

　　<span id="btn_right" class="arrow next"></span>

　　</div>

　　</div>

　　<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>