Javascript achieves seamless control between left and right, and javascript seamless scrolling

Javascript achieves seamless control between left and right, and javascript seamless scrolling

Seamless scrolling is a special effect that is often used in projects. There are also a lot of sample code on the Internet. Here we will share with you a piece of code that is relatively simple and practical, and has good compatibility, let's take a closer look.

Html code:

Copy codeThe Code is as follows:
</SPAN> html>
</SPAN> head lang = "en">
</SPAN> meta charset = "UTF-8">
</SPAN> title> seamless scrolling </SPAN> title>
</SPAN> script src = "js/0010.js"> </SPAN> script>
</SPAN> link rel = "stylesheet" type = "text/css" href = "css/0010.css"/>
</SPAN> head>
</SPAN> body>
</SPAN> a href = "javascript:"> left </SPAN> a>
</SPAN> a href = "javascript:"> right </SPAN> a>
</SPAN> div id = "div1">
</SPAN> ul>
</SPAN> li> </SPAN> img src = "image/1.jpg"> </SPAN> li>
</SPAN> li> </SPAN> img src = "image/2.jpg"> </SPAN> li>
</SPAN> li> </SPAN> img src = "image/3.jpg"> </SPAN> li>
</SPAN> li> </SPAN> img src = "image/4.jpg"> </SPAN> li>
</SPAN> ul>
</SPAN> div>
</SPAN> body>
</SPAN> html>

CSS code

Copy codeThe Code is as follows:
*{
Margin: 0;
Padding: 0;
}
# Div1 {
Overflow: hidden;
Background: blue;
Position: relative;
Width: 600px;
Height: 150px;
Margin: 100px auto;
}
# Div1 ul {
Position: absolute;
Left: 0px;
Top: 0px;
List-style: none;
}
# Div1 ul li {
Float: left;
}
# Div1 ul li img {
Width: 150px;
Height: 150px;
}

Js: Code

Copy codeThe Code is as follows:
Window. onload = function (){
Var oDiv = document. getElementById ('div1 ');
Var oUl = oDiv. getElementsByTagName ('ul ') [0];
Var aLi = oUl. getElementsByTagName ('lil ');
Var timer = null;
Var speed = 2; // control the rolling speed and direction
OUl. innerHTML = oUl. innerHTML + oUl. innerHTML;
OUl. style. width = aLi [0]. offsetWidth * aLi. length + 'px ';
Timer = setInterval (move, 30 );
ODiv. onmouseover = function () {// move the cursor to tentative
ClearInterval (timer );
};
ODiv. onmouseout = function () {// move the mouse out to continue scrolling
Timer = setInterval (move, 30 );
}
Document. getElementsByTagName ('A') [0]. onclick = function (){
Speed =-2;
}
Document. getElementsByTagName ('A') [1]. onclick = function (){
Speed = 2;
}
Function move () {// scroll the image
If (oUl. offsetLeft <-oUl. offsetWidth/2 ){
OUl. style. left = 0;
}
If (oUl. offsetLeft> 0 ){
OUl. style. left =-oUl. offsetWidth/2 + 'px ';
}
OUl. style. left = oUl. offsetLeft + speed + 'px ';
}
}

Is the effect very good.