Javascript: another method for performing 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. Take a look at that articleArticleRight.

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.

 <  Ul  ID  = "Idslider2" >          <  Li  Style  = ""  > <  A  Href  = "Http://jo2.org /"  > <  IMG  SRC  = "../S1.jpg"  /> </  A  > </  Li >          <  Li  > <  A  Href  = "Http://jo2.org /"  > <  IMG  SRC  = "../S2.jpg"  /> </  A  > </  Li  >          < Li  > <  A  Href  = "Http://jo2.org /"  > <  IMG  SRC  = "../S3.jpg"  /> </  A  > </  Li  >          <  Li  > < A  Href  = "Http://jo2.org /"  > <  IMG  SRC  = "../S4.jpg"  /> </  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 contains the following:Only the current image is set to show, and the remaining images are hidden. When you want to scroll, the next image is displayed, and you can determine whether the next image is before or after the current image: roll back to the left, and roll back to the front.

Because all images are setFloatTherefore, when any two images are displayed, they are closely tied to each other for float reasons, so that they do not have to worry about image positioning.

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...