Using jquery to achieve Youku Homepage Carousel diagram

　　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

　　

 1 <div class= "lunbo" > 2 <div class= "picture" > 3 <ul> 4 &LT;LI&G                 T;</li> 5 <li></li> 6                 <li></li> 7 <li></li> 8         <li></li> 9 </ul>10 </div>11 <ul class= "btn" >12 <li id= "active" ><div></div></li>13 &LT;LI&GT;&L T;div></div></li>14 <li><div></div></li>15 <li><di v></div></li>16 <li><div></div></li>17 </ul>18 &L T;div id= "left" ></div>19 <div id= "right" >20 &LT;/div> 

view code

 1 *{2 margin:0; 3 padding:0; 4} 5. lunbo{6 width:100%; 7 height:410px; 8 position:relative; 9  text-align:center;10}12. picture{13 width:1190px;14 height:480px;15 position:absolute;16 top:  0;17 left:88px;18 overflow:hidden;19}20. picture li{21 width:1190px;22 height:410px;23 margin:0 auto;24 list-style-type:none;25 margin-top:70px;26 position:absolute;27 overflow:hidden;28 top:;     }32, picture img{33 cursor:pointer;34}35. btn{36 display:block;37 width:150px;38     height:30px;39 position:absolute;40 top:460px;41 left:130px;42}43. btn li{45 display:block;46     width:10px;47 height:10px;48 background-color:white;49 list-style-type:none;50 position:absolute;51 top:0px;52 left:0px;53 border-radius:10px;54 cursor:pointer;55}56 #active {background-color: #03 a9f4;58}59. btn Li:hover{60 background-color: #9e9e9e,}62 #left {position:absolute;65 top:240px;66 left:90px;67 cur sor:pointer;68}69 #right {position:absolute;71 top:240px;72 left:1220px;73 cursor:pointer;74}

View Code

Then we use jquery to set the position of the initial picture and the location of the Dot.

1     function Setcirpos () {2         //set The location of the dot 3         $cir. each (function () {4             $ (this). css ({5                 left:$ (this). Index () *25 + 6             }) 7         }); 8         //set The position of the picture that you just started not showing 9         $pic. slice (1). each (function () {ten             $ (this). css ({one left                 : $picW             ) 13         }) +     }

View Code▓▓▓▓▓▓ Automatic Carousel

Let's take a look at the defined global Variables.

1     var $cir = $ ('. btn Li '); 2     var $pic = $ ('. picture Li '); 3     var $picW = $pic. width (); 4     var $oLeft = $ (' #left '); 5     var $oRight = $ (' #right '); 6  7     //current picture 8     var nowpic = 0; 9     //prevent users from continuously clicking on     var canclick = t Rue;11     //timer-     var timer = null;

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

1     //set Timer Auto Switch 2     timer = setinterval (function () {3         Auto (); 4     },2000); 5  6     //auto switch  7     function Auto () {8         var index = nowpic + 1; 9         if (index < 0) {ten             index = 4;11         }else if (index > 4) {12             index = 0;13         }         $pic. eq (index). css (' left ', $picW),         $pic. eq (nowpic). animate ({left:-$picW}, +),         $pic. eq ( Index). animate ({left:0}, n);         nowpic = index;19         //sets The style of the dots for the current picture         $cir. eq (nowpic). attr (' ID ', ' Active '). siblings (). attr (' ID ', ');     

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

1     function Lunbo () {2         $cir. Click (function () {3             clearinterval (timer); 4             var index = $ (this). Index (); 5< C4/>6             if (index > Nowpic) {7                 //tap value is greater than the current value of 8                 $pic. eq (index). css (' left ', $picW), 9                 $pic. eq (nowpic). Animate ({left:-$picW},400),             }else If (index < Nowpic) {one                 //tap value is less than the current value of                 $pic. eq (index). css (' Left ',-$picW),                 $pic. eq (nowpic). animate ({left: $picW},400),             }15             $pic. eq (index). animate ({ Left:0},400,function () {+                 timer = setinterval (function () {                     auto ();                 },3000)             ; Nowpic = index;22             //sets The style of the current Picture's dots             $cir. eq (nowpic). attr (' ID ', ' Active '). siblings (). attr (' ID ', '); 24         }); +     }

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

1     //click left ARROW 2     $oLeft. click (function () {3  4         if (canclick) {5             clearinterval (timer); 6             Canclick = False 7             var index = nowPic-1; 8             If (index < 0) {9                 index = 4;10             }else if (index > 4) {one                 index = 0;12
   }13             $pic. eq (index). css (' left ',-$picW),             $pic. eq (nowpic). animate ({left: $picW}, +);             Pic.eq (index). animate ({left:0}, 400,function () {                 canclick = true;17                 timer = setinterval (function () {18                     Auto ();                 },3000);             nowpic = index;23             //sets The style of the dots for the current picture             $cir. eq (nowpic). attr (' ID ', ' Active '). siblings (). attr (' ID ', ');         }26     })

View Code

1     //click right ARROW 2     $oRight. click (function () {3  4         if (canclick) {5             clearinterval (timer); 6             Canclick = false; 7             var index = nowpic + 1; 8             if (index < 0) {9                 index = 4;10             }else if (index > 4) {one                 index = 0;12
   }13             $pic. eq (index). css (' left ', $picW),             $pic. eq (nowpic). animate ({left:-$picW}, +);             Pic.eq (index). animate ({left:0}, 400,function () {                 canclick = true;17                 timer = setinterval (function () {18                     Auto ();                 },3000);             nowpic = index;23             //sets The style of the dots for the current picture             $cir. eq (nowpic). attr (' ID ', ' Active '). siblings (). attr (' ID ', ');         }26     })

View Code

▓▓▓▓▓▓ Summary

This effect is very simple to achieve, that is, at first did not think of the realization of the idea (stupid).

Using jquery to achieve Youku Homepage Carousel diagram