Js image, scroll to the right, sample code

First, Zhang

Style
Copy codeThe Code is as follows:
# 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 # scrolone {float: left ;}
# StarScroll # scroalone a {float: left; width: 204px; height: 188px; margin-right: 9px; float: left; display: inline ;}
# StarScroll # scrolone 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 ;}

Html code
Copy codeThe Code is as follows:
<Div>
<Div id = "div_left">
<Span id = "btn_left" class = "arrow prev"> </span>
</Div>
<Div id = "starScroll">
<Div id = "contentScroll">
<Div id = "scrolone">
<A href = "#" title = "1"> </a>
<A href = "#" title = "2"> </a>
<A href = "#" title = "3"> </a>
<A href = "#" title = "4"> </a>
<A href = "#" title = "5"> </a>
<A href = "#" title = "6"> </a>
<A href = "#" title = "7"> </a>
<A href = "#" title = "8"> </a>
</Div>
<Div id = "ScrollTwo"> </div>
</Div>
</Div>
<Div id = "div_right">
<Span id = "btn_right" class = "arrow next"> </span>
</Div>
</Div>

JS Code
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var Scroll = (function (){
Return function (){
Var starScroll = document. getElementById ("starScroll "),
Scrolone = document. getElementById ("scrolone "),
ACollection = scrolone. getElementsByTagName (""),
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 = scrolone. innerHTML;
STimeout = setTimeout (Init, TimeTimeout );
}
}
})();
Scroll ();
</Script>