JS Seamless rolling principle and explanation [turn from the moment Fang Hua]

Just contact JS, online to find some about seamless scrolling tutorial, but all the same, for me this kind of novice also just will use, do not know what meaning, want to write a more is confused. So find some information, detailed explanation of JS seamless scrolling principle, I believe that after reading this article, Writing a scrolling effect yourself won't be a problem.
This paper takes Css+div+js as an example to explain in detail the principle of seamless rolling implementation.
First build four layers (div).

The structure is as follows:






Id= "A" (hereinafter referred to as a,id= "B" abbreviated as B) for the visual part of the Carousel, B for the carousel part, b_1 for the carousel, but b_2 and b_1 to be on the same line, because the principle of the rotation is the use of scrollleft continuous accumulation of the way to achieve, when the b_2 rolling, from B_ 1 start scrolling again.

The following is a description of the code (the code can be found online, you can also use the code in this article.) ) The meaning of the various parameters:
In fact, each code is Datong small easy
<script type= "Text/javascript" language= "JavaScript" >

var X=document.getelementbyid ("a");
The custom variable X,getelementbyid is the object obtained by ID. You can understand that: will document.getElementById ("a")
This code is abbreviated to X. Here's the x you can change casually. It's OK to not define x here, but the code behind is a little tricky.

var y=document.getelementbyidx_x ("B_1");
var z=document.getelementbyidx_x ("b_2");
function Test () {
Custom function test,test can be changed casually, the value is empty.

if (x.scrollleft>=z.offsetwidth)
If the scrollleft value of x is greater than offsetwidth equal to Z.
The value of ScrollLeft is the value of the scrollbar move.


Offsetwidth is the visual width of the object. That is, Z includes the width of the border, because Y and Z are the same width
So, you can change Z to Y, or the width to Z is the same.

X.scrollleft-=y.offsetwidth;
ScrollLeft: Represents the width of the page that is hidden on the left side of the scrollbar when the page is scrolled to the right with the scroll bar, and the scrollleft value of x equals the scrollleft value of x minus the offsetwidth value of Y.
In fact, when Y is fully scrolled, X's scrollleft value and Y's offsetwidth value are equal.
So this piece of code means x.scrollleft=0.
Here y.offsetwidth you can change the width of z.offserwidth or y, and if you change to 0, remove the minus sign.
You might get a little bit of a glimpse of it here, right? Seamless scrolling, in fact, is the first layer of repeated scrolling.
When B_1 scrolls, if there is no "twin" b_2, a b_1 wide blank is displayed when scrolling.
So, if there is no Overflow:hidden attribute, the scroll is the same as the following picture



else{
Otherwise

x.scrollleft++;
The scrollleft value of x is accumulated to achieve mobile

}
}

var run = setinterval (test,1);
The custom Run,setinter is to call the function repeatedly within the specified time until terminated with Clearinterval
This code means that the test is executed every 1 milliseconds, and the scrollleft value of every 1 milliseconds x plus 1
So the larger the number, the slower the scrolling.

X.onmouseover=function () {clearinterval (run)};
When the mouse is over the X, terminate run. Scrolling stop

X.onmouseout=function () {Run=setinterval (test,1)};
When the mouse leaves X, proceed to test with a time of 1 milliseconds.

</script>

Note: <div class= "b_1" > and <div class= "b_2" > To have "Float:left;" Properties, width and height can be customized based on content. <div id= "B" > width to be greater than <div id= "a" > otherwise it will not scroll.

JS Seamless rolling principle and explanation [turn from the moment Fang Hua]