JS realize the picture seamless scrolling special effect _javascript skill

First, the first point of seamless scrolling is--move. As for how to get the elements of a page to move, it's a good idea to learn about the timers in JavaScript.

The method of creating timers in JS includes two kinds: settimeout and setinterval. First, they receive the same parameters: the first parameter is a function for the timer execution, and the second parameter is a number that represents the number of milliseconds after which the timer executes the function. They differ in that: SetTimeout is after a specified time, only one function, and setinterval, is specified at each interval time, on the execution function once, say simple point, is setinterval is settimeout circulation version.

There is also a use of timers: the elimination of timers, there are two methods: Cleartimeout and Clearinterval, respectively, they correspond to different types of timers. In addition, they all receive only one parameter, which is a value returned by the timer (I debug in chrome to find that the return value is a number), which specifies the elimination of that timer.

After the timer's knowledge is mastered, we begin to analyze how to use the timer to move the elements. In fact, this is very simple, is similar to the principle of the film, so that the elements in a very short period of time to occur continuous displacement, we look at the words of this element is to be kept moving. about how to make the elements of displacement, through JS modify the style of elements can be implemented, such as

OUl.style.left = oul.offsetleft + speed + ' px ';

The speed in the above code is the displacement each time it produces. It's interesting to use speed: We can modify the positive negative values of the speed to modify the direction of scrolling.

In addition, regarding the attributes of the element offsetleft I personally think it is worth noting two points: the value of offsetleft by itself by positioning the left and its own set of margin and, offsetleft it is relative to its containing layer of distance (offsettop similar). Of course, this is my own understanding, certainly not very accurate, this pit remember, the next special solution to it.

Let the elements move the principle is basically this, the following start to analyze the seamless scrolling display of the implementation of the picture, I gave the example is to scroll to the left, the right principle, as mentioned in the code:

First of all assume that the need to cycle scrolling pictures only 4, in order to meet the picture rolling up the requirements of the cycle, you need to put the picture as shown (1) to do this:

So when the first picture 1 scrolling out of the border, the following picture 1 appears in the back of the picture 4, so the effect looks like the loop ~

When the picture scrolls to the following situation:

Scrolling continues to cause the picture to appear blank behind it, it is not the effect of circular scrolling, in fact this is also the key to the program, whenever the picture scrolling to figure (2) This situation, you should let the picture back to the figure (1) that state and then continue to scroll, so as to form a seamless circular scrolling effect.

In addition to expand the program to write the mouse moved into the picture to stop scrolling, remove the effect of continuous scrolling, is to use the method of eliminating the timer to achieve, the code is very simple not introduced. And I have to look good for the style, the picture is set to the size of the 160*120 used, everyone running code is needed to prepare their own pictures.

The code is as follows:

The above is JS to achieve seamless scrolling effect of the detailed code, I hope to help you learn.