Seamless scrolling and seamless image scrolling

Seamless scrolling and seamless image scrolling

 

For js:

<Script>

Window. onload = function (){

}

Var all = document. getElementById ("all ");
Var screen = document. getElementById ("screen ");
Var imgWidth = screen. offsetWidth;
Var ul = document. getElementById ("ul ");
Var ulLiArr = ul. children;
Var ol = screen. children [1];
Var arr = screen. children [2];
Var left = document. getElementById ("left ");
Var right = document. getElementById ("right ");

// Copy
Ul. appendChild (ulLiArr [0]. cloneNode (true ));
// Ol content Filling
For (var I = 0; I <ulLiArr. length-1; I ++ ){
Var newli = document. createElement ("li ");
Newli. innerHTML = I + 1;
Ol. appendChild (newli );
}

// Lighting Style
Var olLiArr = ol. children;
OlLiArr [0]. className = "current ";

// Bind an animation
For (var I = 0; I <olLiArr. length; I ++ ){
OlLiArr [I]. onmouseover = function (){
For (var j = 0; j <olLiArr. length; j ++ ){
OlLiArr [j]. className = "";
}
This. className = "current ";
Animate (ul,-imgWidth * (this. innerHTML-1 ));
Key = square = this. innerHTML-1;

}
}
// Button event on the right
Var key = 0;
Var square = 0;
Right. onclick = auto;
// Button event on the left
Left. onclick = auto1;

// Timer
Var timer = setInterval (auto, 1000 );

All. onmousemove = function (){
Arr. style. display = "block ";
ClearInterval (timer );
}
All. onmouseout = function (){
Arr. style. display = "none ";
Timer = setInterval (auto, 1000 );
}
// Encapsulation of buttons on the right
Function auto (){
Key ++;
If (key = 6 ){
Ul. style. left = 0;
Key = 1;
}
Square ++;
If (square = 5 ){
Square = 0;
}
For (var j = 0; j <olLiArr. length; j ++ ){
OlLiArr [j]. className = "";
}
OlLiArr [square]. className = "current ";
Animate (ul,-imgWidth * key );
}
// Encapsulate the buttons on the left
Function auto1 (){
Key --;
If (key =-1 ){
Ul. style. left =-imgWidth * 5 + "px ";
Key = 4;
}
Square --;
If (square =-1 ){
Square = 4;
}
For (var j = 0; j <olLiArr. length; j ++ ){
OlLiArr [j]. className = "";
}
OlLiArr [square]. className = "current ";
Animate (ul,-imgWidth * key );
}
}
Function animate (ele, target ){
ClearInterval (ele. timer );
Ele. timer = setInterval (function (){
Var sep = target> ele. offsetLeft? 10:-10;
Ele. style. left = ele. offsetLeft + sep + "px ";
If (Math. abs (target-ele.offsetLeft) <= Math. abs (sep )){
Ele. style. left = target + "px ";
ClearInterval (ele. timer );
}
}, 10 );
}

</Script>