Another idea of javascript For image scrolling

Let's talk about one of the most common ideas:

Pack the pictures with ul and set float. Then set the ul as absolute positioning, and its parent tag is located using relative. You can set the left or top values of ul to scroll the image queue.

Features:

Only one html element (ul) is operated, which has a low overhead on the system. rollback is performed when the system is rolled to the header, and rollback is performed when the system is rolled from a large serial number to a small serial number; scroll from the last serial number to the first one, and all the Middle pictures will pass by once.

Another idea is the idea I implemented in XScroll. js. All images are absolutely positioned. For more information, see the article.

After XScroll. js is complete, I always think that the consumption of his system is a problem, because he implements an image switch and basically operates two images at the same time. So I want to write a lite version, but I don't want to say the most common one in my first article.

Later, I found another way to implement rolling switching on the Tudou female channel.

He has the following features:

No matter which sequence number is jumped to, only one step is rolled. For example, from 1 to 2, or from 1 to 3, only one step is rolled. Even if there are other images in the middle, it will not appear; of course, it will also be rolled back to the header, but there is only one step.

This effect looks amazing. I studied his html and found that the implementation method is much easier than my XScroll. js.
Copy codeThe Code is as follows:
<Ul id = "idSlider2">
<Li style = ""> <a href = "http://office.jb51.net/"> </a> </li>
<Li> <a href = "http://jb51.net/"> </a> </li>
<Li> <a href = "http://baidu.com/"> </a> </li>
<Li> <a href = "http:// SC .jb51.net/"> </a> </li>
</Ul>

The html structure is very common. The previous positioning is the same as the most common idea. float: left is set for all images. However, JS has a flaw: only set the current image to display, and hide other images. When you want to scroll, the next image is displayed, determine whether the next image is in the front or back of the current image: Roll left at the back and roll back at the front.

Because float is set for all images, when any two images are displayed, they are closely tied for float reasons, you don't have to worry about image locating.

In this way, you only need to operate the image container (I .e. the ul), instead of a single image, saving system resources.

I think this idea is wonderful, simple, and economical. So I wrote XScroll2.js to record this effect, and it feels quite good.

If you are interested, you can view the Example page of XScroll2.js, which is similar to the picture switching on the home page of the Pat network-because his effect is also described above. But I don't know how many students I can insist on seeing at the end of the article...