▓▓▓▓▓▓ approximate
Introduction
See a carousel diagram of the idea, just want to do their own hands-on, in general, with jquery to achieve a much simpler
If you have questions about the methods used in your code, you can refer to my jquery learning path (continuous update), which is explained, or if you study jquery as much as I do soon, then you can look at my jquery small case (continuous update) and learn from each other!
Preview: Youku Home Carousel Diagram
▓▓▓▓▓▓ Ideas
The idea is actually very simple, that is, when you click on the dots below the picture or the arrows on either side of the picture, let the picture that you want to see go to its position, then the current picture and the picture you want to see move in one direction.
For example: We click on the fifth dot, let the fifth picture run to the back of the current picture, and then move to the left
Of course, if you want to look at the previous picture, let the picture run to the left of the current picture, then move to the right with the current picture
▓▓▓▓▓▓ basic structure and style
View Code View Code
Then we use jquery to set the position of the initial picture and the location of the dot.
View Code▓▓▓▓▓▓ Automatic Carousel
Let's take a look at the defined global variables.
View Code
The Nowpic is set to record the currently displayed picture, because there are three ways to trigger a picture switch in this carousel, so this variable is three ways to share
The Canclick variable is set to prevent the user from clicking when the picture switch animation effect is not completed
View Code
▓▓▓▓▓▓ Click Dot
Image switching methods are the same but note that when the small dots to clear the picture automatically switch the timer, after the picture switch is complete, in the setting of automatic switching timer
View Code
▓▓▓▓▓▓ Click the arrow
When the arrow is clicked, we set the Canclick global variable to prevent the user from repeatedly clicking, when the arrow is clicked, we must first determine whether there is a complete animation that Canclick is true, if true, the Cancilck is set to False, Prevent the arrow from clicking Again, and then animate the picture switch, also do not forget to clear the timer, and finally when the animation to toggle the picture is complete, the animate () method's callback function executes, sets the Canclick to True
View CodeView Code
▓▓▓▓▓▓ Summary
This effect is very simple to achieve, that is, at first did not think of the realization of the idea (stupid).
Transfer from http://www.cnblogs.com/qqandfqr/p/6262692.html
Using jquery to achieve Youku Homepage Carousel diagram