This article mainly introduces the method and sample code for javascript to implement seamless scrolling between left and right controls. For more information, see seamless scrolling, which is a special effect that is frequently used in projects, there are also a lot of sample code on the Internet. Here we will share with you a piece of simple and practical code with good compatibility. Let's take a closer look at it.
Html code:
The Code is as follows:
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> seamless scrolling Title>
<Script src = "js/0010.js? 1.1.23 "> Script>
<Link rel = "stylesheet" type = "text/css" href = "css/0010.css? 1.1.23 "/>
Head>
<Body>
<A href = "javascript:"> left A>
<A href = "javascript:"> right A>
<P id = "p1">
<Ul>
<Li> Li>
<Li> Li>
<Li> Li>
<Li> Li>
Ul>
P>
Body>
Html>
CSS code
The Code is as follows:
*{
Margin: 0;
Padding: 0;
}
# P1 {
Overflow: hidden;
Background: blue;
Position: relative;
Width: 600px;
Height: 150px;
Margin: 100px auto;
}
# P1 ul {
Position: absolute;
Left: 0px;
Top: 0px;
List-style: none;
}
# P1 ul li {
Float: left;
}
# P1 ul li img {
Width: 150px;
Height: 150px;
}
Js: Code
The Code is as follows:
Window. onload = function (){
Var oDiv = document. getElementById ('p1 ');
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.