Javascript Continuous Image scrolling and click_image Effects

Code for uninterrupted image scrolling. Css:

The Code is as follows:

Html code

The Code is as follows:

<

Item 1

Product 2

Item 3

Product 4

Product 5

Item 6

Product 7

>>>>>>

JS Code

The 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 p List1 to p list2
GetObj ("List2"). innerHTML = GetObj ("List1"). innerHTML;
// Move to the left
GetObj ('isl _ cont'). scrollLeft = fill;
// Bind the mouse to p ISL_Cont to the event above p. This event is automatically cleared. When you move the mouse over p, automatic playback will be canceled.
GetObj ("ISL_Cont"). onmouseover = function () {clearInterval (AutoPlayObj );}
// Bind the mouse to p ISL_Cont and remove the time above p. This event is bound to automatic playback. When you move the mouse away from the p image, the automatic playback interval starts again.
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 p side of the current on-screen 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 p
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 large p 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 large p 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 );
}
}