JQuery 圖片輪播
阿新 • • 發佈：2019-03-06
alt lis addclass splay width () ima -c this
準備工作：
1、準備幾張大小相同的圖片
完成功能：
1、自動輪播
2、手動輪播
3、點擊二側按鈕前後切換圖片
效果圖：
完整代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .outer { 8 width: 590px; 9 height: 470px; 10 margin: 80px auto; 11 position: relative; 12 } 13 14 .img li { 15 position: absolute; 16 list-style: none; 17 top: 0px; 18 left: 0px; 19 } 20 21.num { 22 position: absolute; 23 bottom: 15px; 24 left: 120px; 25 list-style: none; 26 } 27 28 .num li { 29 display: inline-block; 30 width: 18px; 31 height: 18px; 32 background-color: white; 33 border-radius: 50%; 34 text-align: center; 35 line-height: 18px; 36 margin-left: 10px; 37 } 38 39 .btn { 40 position: absolute; 41 top: 50%; 42 width: 30px; 43 height: 60px; 44 background-color: lightgray; 45 color: white; 46 text-align: center; 47 line-height: 60px; 48 font-size: 30px; 49 opacity: 0.6; 50 margin-top: -30px; 51 display: none; 52 } 53 54 .left_btn { 55 left: 0px; 56 } 57 58 .right_btn { 59 right: 0px; 60 } 61 62 .outer:hover .btn { 63 display: block; 64 } 65 66 .num .active { 67 background-color: red; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="outer"> 73 <ul class="img"> 74 <li><a href="#"><img src="images/0.jpg" alt=""></a></li> 75 <li><a href="#"><img src="images/1.jpg" alt=""></a></li> 76 <li><a href="#"><img src="images/2.jpg" alt=""></a></li> 77 <li><a href="#"><img src="images/3.jpg" alt=""></a></li> 78 <li><a href="#"><img src="images/4.jpg" alt=""></a></li> 79 <li><a href="#"><img src="images/5.jpg" alt=""></a></li> 80 <li><a href="#"><img src="images/6.jpg" alt=""></a></li> 81 <li><a href="#"><img src="images/7.jpg" alt=""></a></li> 82 </ul> 83 <ul class="num"> 84 <!--<li class="active"></li>--> 85 <!--<li></li>--> 86 <!--<li></li>--> 87 <!--<li></li>--> 88 <!--<li></li>--> 89 <!--<li></li>--> 90 <!--<li></li>--> 91 <!--<li></li>--> 92 </ul> 93 <div class="left_btn btn"> <</div> 94 <div class="right_btn btn"> ></div> 95 </div> 96 </body> 97 <script src="jquery-3.3.1.min.js"></script> 98 <script> 99 var i = 0; 100 // 通過JQuery獲取img標簽下li的個數，然後自動創建num標簽下的按鈕標簽li 101 var $img_num = $(".img li").length; 102 for (var j = 0; j < $img_num; j++) { 103 $(".num").append("<li>"); 104 } 105 $(".num li").eq(0).addClass("active"); 106 107 // 手動輪播，綁定事件 108 $(".num li").mouseover(function () { 109 i = $(this).index(); 110 console.log(i); 111 $(this).addClass("active"); 112 $(this).siblings().removeClass("active"); // 取消其他標簽按鈕的active 113 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 114 }) 115 116 // 自動輪播 117 var c = setInterval(GO_R,1500) 118 119 function GO_R() { 120 if (i == $img_num-1) 121 { 122 i = -1; 123 } 124 i++; 125 $(".num li").eq(i).addClass("active") 126 $(".num li").eq(i).siblings().removeClass("active") // 取消其他標簽按鈕的active 127 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 128 } 129 function GO_L(){ 130 if (i == 0) 131 { 132 i = $img_num; 133 } 134 i--; 135 $(".num li").eq(i).addClass("active") 136 $(".num li").eq(i).siblings().removeClass("active") // 取消其他標簽按鈕的active 137 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 138 } 139 // 懸浮，清除計時器 140 $(".outer").hover(function () { 141 clearInterval(c) 142 },function () { 143 c = setInterval(GO_R,1500) 144 }) 145 146 // button 加定播 147 // 綁定一 148 $(".right_btn").click(GO_R) 149 // 綁定二 150 // $(".right_btn").bind("click",GO_R) 151 152 $(".left_btn").click(GO_L) 153 154 </script> 155 </html>
JQuery 圖片輪播