2017新年，我的第一個工作日，對於jQuery掌握不成熟的我寫了一個輪播圖，鼓勵我在新的一年加油工作，掌握新的知識。
輪播圖有自動播放功能，左右按鈕切換圖片，還有下方小圓點也可點擊切換圖片。
代碼寫的不夠成熟，請各位看官指出不足，共同進步(*^__^*)。
html代碼
1 <body> 2 <div class="carousel"> 3 <!--左側按鈕--> 4 <button class="left"><<</button> 5 <ul id="carousel"> 6 <li id="item1"> 7 <img src="img/img1.jpg" /> 8 </li> 9 <li id="item2"> 10 <img src="img/img2.jpg" /> 11 </li> 12 <li id="item3"> 13 <img src="img/img3.jpg" /> 14 </li> 15 </ul> 16 <!--下方小圓點--> 17 <div class="dot"><span class="active"></span><span></span><span></span></div> 18 <!--右側按鈕--> 19 <button class="right">>></button> 20 </div> 21 </body>
jQuery代碼，記得引入js庫，
1 <script> 2 3 $(function(){ 4 var items = $('#carousel').children(); 5 var len = items.length; 6 var index = 0; 7 var str = 0; 8 var dots = $('.dot').children(); 9 /*var dotsChild = $('.dot span');*/ 10 11 //自動播放函數autoPlay() 12 13 function autoPlay(){ 14 $(items[index]).fadeIn(1000); 15 16 function play(){ 17 $(dots).removeClass("active"); 18 if(index >=0 & index < len-1){ 19 $(items[index]).fadeOut(1500); 20 index++; 21 $(items[index]).fadeIn(1500); 22 $(dots[index]).addClass("active"); 23 }else{ 24 $(items[index]).fadeOut(1500); 25 index=0; 26 $(items[index]).fadeIn(1500); 27 $(dots[index]).addClass("active"); 28 }; 29 str = index; 30 } 31 32 setInterval(play,7000); 33 34 } 35 autoPlay(); 36 37 //點擊左側按鈕的函數 38 $(".left").click(function(){ 39 $(dots).removeClass("active"); 40 if(str == 0){ 41 $(items[str]).fadeOut(1500); 42 str = len-1; 43 $(items[str]).fadeIn(1500); 44 $(dots[str]).addClass("active"); 45 index = str; 46 47 }else{ 48 $(items[str]).fadeOut(1500); 49 str --; 50 $(items[str]).fadeIn(1500); 51 $(dots[str]).addClass("active"); 52 index = str; 53 } 54 }); 55 //點擊右側按鈕的函數 56 $(".right").click(function(){ 57 $(dots).removeClass("active"); 58 if(str == len-1){ 59 $(items[str]).fadeOut(1500); 60 str = 0; 61 $(items[str]).fadeIn(1500); 62 $(dots[str]).addClass("active"); 63 index = str; 64 }else{ 65 $(items[str]).fadeOut(1500); 66 str ++; 67 $(items[str]).fadeIn(1500); 68 $(dots[str]).addClass("active"); 69 index = str; 70 } 71 }) 72 //小圓點 73 $(".dot span").click(function(){ 74 var num = $(this).index(); 75 $(dots).removeClass("active"); 76 $(dots[num]).addClass("active"); 77 $(items).fadeOut(1500); 78 $(items[num]).fadeIn(1500); 79 index = num; 80 }) 81 }); 82 </script>
css代碼：
1 .carousel{ 2 width: 800px; 3 margin: auto; 4 position: relative; 5 } 6 7 .carousel ul{ 8 margin: 0; 9 padding: 0; 10 position: relative; 11 width: 800px; 12 height: 500px; 13 14 } 15 .carousel ul li{ 16 list-style: none; 17 float: left; 18 position: absolute; 19 top: 0; 20 left: 0; 21 display: none; 22 } 23 #item1{ 24 z-index: 3; 25 } 26 #item2{ 27 z-index: 2; 28 } 29 #item3{ 30 z-index: 1; 31 } 32 /*向左向右的按鈕*/ 33 .left,.right{ 34 position: absolute; 35 top: 200px; 36 z-index: 10; 37 width: 30px; 38 height: 30px; 39 border: none; 40 background: #000; 41 color: #fff; 42 text-align: center; 43 padding: 0; 44 opacity: 0.1; 45 cursor: pointer; 46 } 47 .left{ 48 left: 0; 49 } 50 .right{ 51 right: 0; 52 } 53 .left:hover,.right:hover{ 54 opacity:1; 55 } 56 /*圓點*/ 57 .dot{ 58 width: 800px; 59 bottom: 0; 60 height: 30px; 61 position: absolute; 62 text-align: center; 63 z-index: 10; 64 } 65 .dot span{ 66 display: inline-block; 67 width: 12px; 68 height: 12px; 69 border-radius: 50px; 70 background: #fff; 71 margin: 0 15px 0 0 ; 72 cursor: pointer; 73 } 74 .dot .active{ 75 background: #f00 !important; 76 }