HTML5 Picture Seamless Scrolling

To realize the seamless scrolling of the picture is to let your picture set in a certain time automatically switch, it will need JS timer to control the time.

There are two methods for timers in JS: SetTimeout and SetInterval. The parameters they receive are the same, the first parameter is the function for the execution of the timer, the second parameter is the number, and the function is executed after a few milliseconds. The difference is that settimeout executes only one specified function at a time, while setinterval executes the specified function once every set of times.

After the timer we also need to know how to clear the timer: Cleartimeout and Clearinterval. They all receive only one parameter, the value returned by the timer, that is used to eliminate the specified timer.

Know the timer after we will find a way to move the picture, so that the image elements at a certain speed shift can be achieved. You can use JS to control the style of the element

The code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
Test results:
HTML5 Picture Seamless Scrolling