Use jQuery to implement Youku homepage carousel and jquery homepage carousel

Use jQuery to implement Youku homepage carousel and jquery homepage carousel
Too many rows too many rowsIntroduction

　　After seeing the idea of a carousel image, I want to practice it myself. In general, jQuery is much easier to implement.

If you have any questions about the methods used in the code, you can refer to my jQuery learning path (continuous update), which will be explained in it; or you will learn jQuery just like me soon, then you can see my jQuery small case (continuous update) and learn from each other!

Preview: Youku homepage carousel

 

Train of Thought

The idea is actually very simple, that is, when you click the dot under the image or the arrow on both sides of the image, let the image you want to see go to its position, then the current image and the image you want to see can be moved in one direction.

For example, we click the fifth dot to move the fifth image to the back of the current image and move it to the left.

　　

Of course, if you want to see the previous image, let the image first go to the left of the current image, and then move it to the right with the current image.

 

Basic structure and style

　　

 1     <div class="lunbo"> 2         <div class="picture"> 3             <ul> 4                 <li></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             <li><div></div></li>14             <li><div></div></li>15             <li><div></div></li>16             <li><div></div></li>17         </ul>18         <div id="left"></div>19         <div id="right"></div>20     </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 11 }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: ;29     left: ;30 31 }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 44 .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{57     background-color: #03A9F4;58 }59 .btn li:hover{60     background-color:#9e9e9e;61 }62 63 #left{64     position: absolute;65     top: 240px;66     left: 90px;67     cursor: pointer;68 }69 #right{70     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 image and the position of small dots.

1 function setCirPos () {2 // set the position of the dot 3 $ cir. each (function () {4 rows (this).css ({5 left: $ (this ). index () * 25 + 500 6}) 7}); 8 // set the position of the image not displayed at the beginning. 9 $ pic. slice (1 ). each (function () {10 rows (this).css ({11 left: $ picW12}) 13}) 14}

View Code repeated 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 image 8 var nowPic = 0; 9 // Prevent Users From clicking 10 var canClick = true; 11 // timer 12 var timer = null;

View Code

　　

NowPic is set to record the currently displayed image, because this carousel image has three ways to trigger image switching, so this variable must be shared by the three methods.

The canClick variable is set to Prevent Users From clicking images when the animation effect is not completed.

 

1 // set the timer to automatically switch 2 timer = setInterval (function () {3 auto (); 4}, 2000); 5 6 // automatically switch 7 function auto () {8 var index = nowPic + 1; 9 if (index <0) {10 index = 4; 11} else if (index> 4) {12 index = 0; 13} 14 define pic.eq(index).css ('left', $ picW); 15 $ pic. eq (nowPic ). animate ({left:-$ picW}, 400); 16 $ pic. eq (index ). animate ({left: 0}, 400); 17 18 nowPic = index; 19 // set the pattern of the dot of the current image to 20 $ cir. eq (nowPic ). attr ('id', 'active '). siblings (). attr ('id', ''); 21}

View Code

 

Click the dot

The image switching method is the same, but note that when you click a small dot, you must be clear about the automatic switching timer of the image. After the image switching is complete, set the automatic switching timer.

1 function lunbo () {2 $ cir. click (function () {3 clearInterval (timer); 4 var index = $ (this ). index (); 5 6 if (index> nowPic) {7 // The clicked value is greater than the current value 8 then pic.eq(index).css ('left', $ picW); 9 $ pic. eq (nowPic ). animate ({left:-$ picW}, 400); 10} else if (index <nowPic) {11 // The clicked value is smaller than the current value 12 then pic.eq(index).css ('left ', -$ picW); 13 $ pic. eq (nowPic ). animate ({left: $ picW}, 400); 14} 15 16 $ pic. eq (index ). animate ({left: 0}, 400, function () {17 timer = setInterval (function () {18 auto (); 19}, 3000); 20 }); 21 nowPic = index; 22 // set the pattern of the dot of the current image 23 $ cir. eq (nowPic ). attr ('id', 'active '). siblings (). attr ('id', ''); 24}); 25}

View Code

 

 

Click the Arrow

When you click the arrow, we set the global variable canClick to prevent multiple consecutive clicks. When you click the arrow, first, you must determine whether there is a completed animation, that is, whether canClick is true. If it is true, set canCilck to false to prevent you from clicking the arrow again and then performing an animation for image switching, do not forget the timer. When the animation of the switched image is completed, the callback function of the animate () method is executed and canClick is set to true.

1 // click the 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) {11 index = 0; 12} 13 then pic.eq(index).css ('left',-$ picW); 14 $ pic. eq (nowPic ). animate ({left: $ picW}, 400); 15 $ pic. eq (index ). animate ({left: 0}, 400, function () {16 canClick = true; 17 timer = setInterval (function () {18 auto (); 19}, 3000 ); 20}); 21 22 nowPic = index; 23 // set the pattern of the dot of the current image 24 $ cir. eq (nowPic ). attr ('id', 'active '). siblings (). attr ('id', ''); 25} 26 })

View Code

1 // click the 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) {11 index = 0; 12} 13 then pic.eq(index).css ('left', $ picW); 14 $ pic. eq (nowPic ). animate ({left:-$ picW}, 400); 15 $ pic. eq (index ). animate ({left: 0}, 400, function () {16 canClick = true; 17 timer = setInterval (function () {18 auto (); 19}, 3000 ); 20}); 21 22 nowPic = index; 23 // set the pattern of the dot of the current image 24 $ cir. eq (nowPic ). attr ('id', 'active '). siblings (). attr ('id', ''); 25} 26 })

View Code

 

 

Summary

The implementation of this effect is very simple, that is, the idea of implementation (stupid) that was not initially thought ).