Javascript Continuous Image scrolling and clickable

Css: Copy codeThe Code is as follows: <style type = "text/css">
. RollBox
{
Width: 704px;
Overflow: hidden;
Padding: 12px 0 5px 6px;
}
. RollBox. LeftBotton
{
Height: 52px;
Width: 19px;
Background: url(jt.gif) no-repeat 11px 0;
Overflow: hidden;
Float: left;
Display: inline;
Margin: 25px 0 0 0;
Cursor: pointer;
Background-color: Blue;
Color: White;
}
. RollBox. RightBotton
{
Height: 52px;
Width: 20px;
Background: url(jt.gif) no-repeat-8px 0;
Overflow: hidden;
Float: left;
Display: inline;
Margin: 25px 0 0 0;
Cursor: pointer;
Background-color: Blue;
Color: White;
}
. RollBox. Cont
{
Width: 663px;
Overflow: hidden;
Float: left;
}
. RollBox. ScrCont
{
Width: 000px;
}
. RollBox. Cont. pic
{
Width: 132px;
Float: left;
Text-align: center;
}
. RollBox. Cont. pic img
{
Padding: 4px;
Background: # fff;
Border: 1px solid # ccc;
Display: block;
Margin: 0 auto;
}
. RollBox. Cont. pic p
{
Line-height: 26px;
Color: #505050;
}
. RollBox. Cont a: link,. rollBox. Cont a: visited
{
Color: #626466;
Text-decoration: none;
}
. RollBox. Cont a: hover
{
Color: # f00;
Text-decoration: underline;
}
. RollBox # List1,. rollBox # List2
{
Float: left;
}
</Style>

Html codeCopy codeThe Code is as follows: <div class = "rollBox">
<Div class = "LeftBotton" onmousedown = "ISL_GoUp ()" onmouseup = "ISL_StopUp ()" onmouseout = "ISL_StopUp ()">
<
</Div>

<Div class = "Cont" id = "ISL_Cont">
<Div class = "ScrCont">
<Div id = "List1">
<! -- Image list begin -->
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 1 </a>
</Div>
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 2 </a>
</Div>
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 3 </a>
</Div>
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 4 </a>
</Div>
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 5 </a>
</Div>
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 6 </a>
</Div>
<Div class = "pic">
<A href = "####">
</a>
<A href = "####"> Item 7 </a>
</Div>
<! -- Image list end -->
</Div>
<Div id = "List2">
</Div>
</Div>
</Div>

<Div class = "RightBotton" onmousedown = "ISL_GoDown ()" onmouseup = "ISL_StopDown ()" onmouseout = "ISL_StopDown ()">
>>>>>>
</Div>
</Div>

JS CodeCopy codeThe Code is as follows: // speed (MS)
Var Speed = 10;
// Move (px) each time)
Var Space = 5;
// Page flip width
Var PageWidth = 132;
// Overall shift (px)
Var fill = 0;
// Whether to move automatically; true: move; false: Do not move
Var MoveLock = false;
// Move the time object
Var MoveTimeObj;
// The up/down flip variable. If comp is smaller than 0, the up flip is performed, and the down flip is performed.
Var Comp = 0;
// Move objects up and down
Var AutoPlayObj = null;
// Assign all elements in div List1 to div list2
GetObj ("List2"). innerHTML = GetObj ("List1"). innerHTML;
// Move to the left
GetObj ('isl _ cont'). scrollLeft = fill;
// Bind the cursor to the div ISL_Cont to the event above the div. This event is automatically cleared. When you move the cursor over the div image, automatic playback will be canceled.
GetObj ("ISL_Cont"). onmouseover = function () {clearInterval (AutoPlayObj );}
// Bind the cursor to the div ISL_Cont and move the cursor away from the upper part of the div. This event is automatically played. When you move the cursor away from the div image, automatic playback starts at an interval.
GetObj ("ISL_Cont"). onmouseout = function () {AutoPlay ();}
// The first entry is bound to automatic playback by default.
AutoPlay ();
/*
Obtains the specified html object.
*/
Function GetObj (objName ){
// Determine whether a valid element tag exists on the current page. document. getElementById is compatible with Firefox.
If (document. getElementById)
{
Return eval ('document. getElementById ("'+ objName + '")')
}
Else
{
Return eval ('document. all. '+ objName)
}
}
/*
Auto scroll
*/
Function AutoPlay (){
// Clear the scrolling of the previously bound Interval
ClearInterval (AutoPlayObj );
// Rebind interval rolling. The setInterval () method is executed by binding at the specified time, And the clearInterval () method is used to clear the bound objects at the specified time.
AutoPlayObj = setInterval ('isl _ GoDown (); ISL_StopDown (); ', 5000 );
}
/*
Turning up
*/
Function ISL_GoUp (){
// If the current status is automatic playback, the following code will not be executed
If (MoveLock)
Return;
// Clear the scrolling of the previously bound Interval
ClearInterval (AutoPlayObj );
MoveLock = true;
// Automatically move to the left at the specified time
MoveTimeObj = setInterval ('isl _ ScrUp (); ', Speed );
}
/*
Turn up and stop
*/
Function ISL_StopUp (){
// Clear the scrolling of the previously bound Interval
ClearInterval (MoveTimeObj );
// Determine whether the margin of the side of the div of the currently explicit image is the first item image. The value not equal to 0 is not the first image, and the value is equal to the first image.
If (GetObj ('isl _ cont'). scrollLeft % PageWidth-fill! = 0)
{
// Move the left margin of the div
Comp = fill-(GetObj ('isl _ cont'). scrollLeft % PageWidth );
// Start to move
CompScr ();
} Else
{
MoveLock = false;
}
// Automatic playback
AutoPlay ();
}
/*
Flip action
*/
Function ISL_ScrUp (){
// If the left margin of the big div of the current image is smaller than 0, its margin is equal to its own margin plus the width of the button clicked on the left
If (GetObj ('isl _ cont'). scrollLeft <= 0)
{
GetObj ('isl _ cont'). scrollLeft = GetObj ('isl _ cont'). scrollLeft + GetObj ('list1'). offsetWidth;
}
// Move to the left
GetObj ('isl _ cont'). scrollLeft-= Space;
}
/*
Flip down
*/
Function ISL_GoDown (){
// Clear the scrolling of the previously bound Interval
ClearInterval (MoveTimeObj );
// If the current status is automatic playback, the following code will not be executed
If (MoveLock)
Return;
// Clear automatic playback
ClearInterval (AutoPlayObj );
MoveLock = true;
// Flip-down method
ISL_ScrDown ();
// Automatically move to the right at the specified time
MoveTimeObj = setInterval ('isl _ ScrDown () ', Speed );
}
/*
Flip-down stop
*/
Function ISL_StopDown (){
// Clear the scrolling of the previously bound Interval
ClearInterval (MoveTimeObj );
// If the left margin of the big div of the current image is smaller than 0, its margin is equal to its own margin plus the width of the button clicked on the left
If (GetObj ('isl _ cont'). scrollLeft % PageWidth-fill! = 0)
{
Comp = PageWidth-GetObj ('isl _ cont'). scrollLeft % PageWidth + fill;
CompScr ();
} Else
{
MoveLock = false;
}
// Start automatic playback
AutoPlay ();
}
/*
Flip down
*/
Function ISL_ScrDown (){
If (GetObj ('isl _ cont'). scrollLeft> = GetObj ('list1'). scrollWidth)
{
GetObj ('isl _ cont'). scrollLeft = GetObj ('isl _ cont'). scrollLeft-GetObj ('list1'). scrollWidth;
}
GetObj ('isl _ cont'). scrollLeft + = Space;
}
/*
Left and right mobile control processing
*/
Function CompScr (){
Var num;
If (Comp = 0)
{
MoveLock = false;
Return;
}
// Flip
If (Comp <0)
{
If (Comp <-Space)
{
Comp + = Space;
Num = Space;
} Else
{
Num =-Comp;
Comp = 0;
}
GetObj ('isl _ cont'). scrollLeft-= num;
SetTimeout ('compscr () ', Speed );
} Else // flip-down
{
If (Comp> Space)
{
Comp-= Space;
Num = Space;
} Else
{
Num = Comp;
Comp = 0;
}
GetObj ('isl _ cont'). scrollLeft + = num;
SetTimeout ('compscr () ', Speed );
}
}