[Jquery] Some treasure picture carousel (Seamless)

Ideas

1. Structure and Style

① the outermost div box when the container, inside the UL width is infinitely large and relative positioning (the move is actually moving the UL left)

② button transparency can be done with Background:rgba ()

③ the last picture immediately after the first one, the first one immediately before the last, that is 5123451 (do not do two pictures no way to stick together), it is the key to seamless

2.js

① Each click of the button, moving the UL distance is, the current image index * picture width

② when moving to the "6" picture (that is, 5 after the 1), should immediately pull him back to 1 position, but note that this judgment instantly pull back the statement, should be written in animate function, to ensure that the animation after the completion of the flawless pull back, rather than in parallel with animate, That will move left to the first, instead of seamlessly right-scrolling to the first one, and vice versa.

③ Click too fast there will be bugs, always fast dot picture moved empty

Cause: The entire campaign is not over before the next click is made

WORKAROUND: Between two clicks, make an interval (that is, when the time interval of two clicks is greater than one value, the animation is performed)

[Jquery] Some treasure picture carousel (Seamless)