javascript Another image scrolling switching effect idea_javascript skills

Let’s talk about the most common idea first:

Wrap the pictures with ul or the like, and set float. Then set the ul itself to be positioned as absolute, and its parent tag to be positioned as relative. By setting the left or top value of ul, the scrolling effect of the picture queue is achieved

Features:

Only operates one html element (i.e. the ul above), which has low system overhead; scrolling to the end will cause Rolling back; scrolling from a large sequence number to a small sequence number will also roll back; scrolling from the last sequence number to the first one will pass through all the pictures in the middle with a "whoosh".

Another idea is the idea I implemented in XScroll.js. All pictures use absolute positioning. See that article for details.

After XScroll.js was completed, I always felt that its system consumption was a problem, because it basically operated two images at the same time to implement an image switch. So I wanted to write a streamlined version, but I didn’t want the most common version I mentioned at the beginning of the article.

Later, I accidentally discovered another idea for implementing picture scrolling switching on the Tudou Women’s Channel.

His characteristics are:

No matter which serial number jumps from which serial number, it only scrolls one step. For example, jumping from 1 to 2, or jumping from 1 to 3, only scrolls one step. Even if there are other pictures in the middle, they will not appear; of course, it will roll back when it reaches the end, but the rollback is only one step.

This effect looks amazing. I studied his html and found that the implementation is much simpler than my XScroll.js.

Copy code The code is as follows:

• 


• 


• 


• 

html structure, very common; the previous positioning is the same as the most common idea, all images are set to float:left . But there is something strange in JS: only the current picture is set to be displayed, and the other pictures are hidden. When scrolling, the next picture is displayed, and it is judged whether the next picture is in front or behind the current picture: scroll left after the current picture. Just roll back in front.

Since all pictures are set to float, when any two pictures are displayed, they will be closely together because of float. In this way, there is no need to worry about the positioning of the pictures.

Moreover, in this way, only the image container (i.e. the ul) needs to be operated, instead of operating a single image, saving system resources.

I think this idea is wonderful, simple and economical, so I wrote an XScroll2.js to record this effect. It feels very good.

Interested friends can take a look at the XScroll2.js sample page, which imitates the image switching on the homepage of Paipai.com - because its effect is also the same as mentioned above. But I don’t know how many students can persist until the end of the article. . .