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.