Horizontal image scrolling (image scrolling from left to right and from right to left)

There are many kinds of horizontal scrolling effects, such as seamless scrolling of images, scrolling from left to right, from right to left, and scrolling of images with a magnifier effect. The javascript special effect code shared by the lazy guy is the seamless scrolling of images and the scrolling of images from left to right and from right to left (Continuous/paused scrolling is supported) in the left-side navigation pane. Both methods can be implemented using a JS Code, but slightly different ,:

JS special effects code Daquan (6) horizontal scrolling of images

First, download the source code of the horizontal scrolling effect of the image. For the convenience of everyone, we made two download files, but the difference is actually very small.

: Http://www.po-soft/lazy ghost. com/blog/Xuan/354.html to remove lazy ghost can be.

After downloading the source code, you need to modify the following:

1. js code at the bottom of the webpage: DHS. showwidth = 330
330 indicates the display width, for example, the width between the two arrows. If you change the display width, you must modify the display width.

2. js code at the bottom of the webpage: DHS. Go ("Left", true)
Here "Left" refers to the default left scrolling. If you want to scroll to the right by default, you can change left to right.

3. In the CSS file: # scroll {width: 330px; Height: 86px; overflow: hidden; position: relative; Z-index: 2; float: Left ;}
The width here refers to the display width, which is the same as 1.

4. In the CSS file:. mqdemoa {width: 3960px! Important; width: 1980px; List-style: none; margin: 0; padding: 0; overflow: hidden ;}
The width here refers to the width of all the displayed content. For example, if a total of six screens are rolled, the width is 330*6. to be compatible with Firefox browsers, you must also set the width compatible with Firefox, it is twice that of IE.

5. In the JS file: This. steplength = 22
It refers to the length of each scroll, which should be adjusted according to the display width. If the display width is large, the scroll length will also increase accordingly.

6. The image is in the JS file from left to right and from right to left:
(Uvleft> = This. uvwidth-330 ){
His. scrolldom. scrollleft = This. uvwidth-330;
Change "330" to "display width.

The horizontal scrolling effect of this image has been tested and can be compatible with all mainstream browsers, so you can use it with confidence.
After such a detailed introduction, I believe everyone will use it. If you have any questions, please leave a message to discuss it. The Lazy hacker will continue to write more JS special effects code for everyone, coming soon!

Recommended articles:
JS slide bar (left and right drag) Effect
Source code of the JS pop-up dialog box
Source code of the foldable auto scaling menu
Source code of the scaling advertisement that can record the top of the cookie
Source code of the PNG Image transparency
Download the above source codePlease visit the loose blog http://www.po-soft loose blog. com/blog/Xuan to remove the loose blog.