javascript non-stop picture scrolling and clickable_image special effects

css:

复制代码 代码如下:

html代码

复制代码 代码如下:

<<<<<

商品1

商品2

商品3

商品4

商品5

商品6

商品7

>>>>>>

JS代码

复制代码 代码如下:

//Speed ​​(milliseconds)
var Speed ​​= 10;
//Move each time (px)
var Space = 5;
//Width of each page turn
var PageWidth = 132;
//Overall shift (px)
var fill = 0;
//Whether to move automatically, true to move, false to not move
var MoveLock = false;
//Move time object
var MoveTimeObj;
//Turn up and down variables, when comp is less than 0, it is flipped up, otherwise it is flipped down
var Comp = 0;
//Move up and down Object
var AutoPlayObj = null;
//Assign all elements in div List1 to div list2
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
//Move left
GetObj('ISL_Cont').scrollLeft = fill;
//Bind the div ISL_Cont to an event when the mouse moves above the div. This event is cleared to play automatically. When the mouse moves to Automatic playback will be canceled when the div image is on
GetObj("ISL_Cont").onmouseover = function(){ clearInterval(AutoPlayObj); }
//Bind the div ISL_Cont to the time when the mouse moves away from the top of the div. The event is bound to autoplay. When the mouse moves away from the div image, it will start to play automatically at intervals
GetObj("ISL_Cont").onmouseout = function(){ AutoPlay();}
// The default binding for the first time is autoplay
AutoPlay();
/*
Get the specified html object
*/
function GetObj(objName){
//Judge the current Whether there is a valid element tag in the 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 previously bound interval rolling
clearInterval(AutoPlayObj);
//Rebind the interval rolling, the setInterval() method is bound to be executed at the specified time, clearInterval () method is to clear the specified time binding object
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',5000);
}
/*
Start turning up
*/
function ISL_GoUp(){
//If it is currently playing automatically, the following code will not be executed
if(MoveLock)
return;
//Clear the previously bound interval Scroll
clearInterval(AutoPlayObj);
MoveLock = true;
//Automatically move to the left within the specified time
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
/*
Stop scrolling
*/
function ISL_StopUp(){
//Clear the previously bound interval scrolling
clearInterval(MoveTimeObj);
//Determine whether the variable distance of the div side of the current displayed image is the first product image. If it is not equal to 0, it is not the first one. Otherwise, it is equal to the first image
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0)
{
//div left margin movement
Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
//start moving
CompScr();
}else
{
MoveLock = false;
}
//Auto play
AutoPlay();
}
/*
Up action
*/
function ISL_ScrUp(){
//If the left margin of the large div of the current image is less than 0, then its margin is equal to its own margin plus the width of the click button 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 ;
}
/*
Scroll down
*/
function ISL_GoDown(){
//Clear the previously bound interval scrolling
clearInterval(MoveTimeObj);
//If it is currently playing automatically, the following code will not be executed
if(MoveLock)
return;
//Clear autoplay
clearInterval(AutoPlayObj);
MoveLock = true;
//Scroll down method
ISL_ScrDown();
//In the specified Automatically move to the right in time
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
/*
Stop scrolling down
*/
function ISL_StopDown() {
//Clear the previously bound interval scrolling
clearInterval(MoveTimeObj);
//If the left margin of the large div of the current picture is less than 0, then its margin is equal to its own margin plus the left The width of the clicked button
if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 )
{
Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth fill;
CompScr();
}else
{
MoveLock = false;
}
//Start automatic play
AutoPlay();
}
/*
Scroll down action
*/
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 movement control processing
*/
function CompScr(){
var num;
if(Comp == 0)
{
MoveLock = false;
return;
}
//Flip up
if(Comp < 0)
{
if(Comp < -Space)
{
Comp = Space;
num = Space;
}else
{
num = -Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft -= num;
setTimeout('CompScr()',Speed);
}else //Turn down
{
if(Comp > Space)
{
Comp - = Space;
num = Space;
}else
{
num = Comp;
Comp = 0;
}
GetObj('ISL_Cont').scrollLeft = num;
setTimeout('CompScr()',Speed);
}
}