【解決火車輪播圖小圓點跳的問題】傳統輪播圖-三位法
阿新 • • 發佈：2017-12-19
ctype clear 位置 padding head doctype image class 改變
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 ul,ol{ 12 list-style: none;13 } 14 a{ 15 text-decoration: none; 16 color:#333; 17 } 18 .carousel{ 19 width: 560px; 20 height: 300px; 21 border: 1px solid #000; 22 margin:50px auto; 23 position: relative; 24 overflow: hidden;25 } 26 .carousel .unit li{ 27 /*每一個li都是火車頭，自己帶著圖片移動*/ 28 /*所有的圖片都在候場位置560px*/ 29 position: absolute; 30 left:560px; 31 width: 560px; 32 height: 300px; 33 } 34 .carousel .unit li:first-child{ 35 left:0;36 } 37 .carousel .btns a{ 38 width: 30px; 39 height: 60px; 40 position: absolute; 41 top:50%; 42 margin-top: -30px; 43 background-color: rgba(0,0,0,.5); 44 color:#fff; 45 font-size: 20px; 46 text-align: center; 47 line-height: 60px; 48 } 49 .carousel .btns a.leftBtn{ 50 left: 10px; 51 } 52 .carousel .btns a.rightBtn{ 53 right: 10px; 54 } 55 .carousel .circles{ 56 width: 140px; 57 height:20px; 58 position: absolute; 59 left:50%; 60 margin-left: -70px; 61 bottom: 30px; 62 overflow: hidden; 63 64 } 65 .carousel .circles ol{ 66 width: 150px; 67 } 68 .carousel .circles ol li{ 69 float: left; 70 width: 20px; 71 height: 20px; 72 margin-right: 10px; 73 border-radius: 50%; 74 background-color: orange; 75 } 76 .carousel .circles ol li.cur{ 77 background-color: red; 78 } 79 80 81 </style> 82 </head> 83 <body> 84 <div class="carousel" id="carousel"> 85 <ul class="unit" id="unit"> 86 <li><a href=""><img src="images/0.jpg" ></a></li> 87 <li><a href=""><img src="images/1.jpg" ></a></li> 88 <li><a href=""><img src="images/2.jpg" ></a></li> 89 <li><a href=""><img src="images/3.jpg" ></a></li> 90 <li><a href=""><img src="images/4.jpg" ></a></li> 91 </ul> 92 <div class="btns"> 93 <a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a> 94 <a href="javascript:void(0);" class="rightBtn" id="rightBtn">></a> 95 </div> 96 <div class="circles" id="circles"> 97 <ol> 98 <li class="cur"></li> 99 <li></li> 100 <li></li> 101 <li></li> 102 <li></li> 103 </ol> 104 </div> 105 </div> 106 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 107 <script type="text/javascript"> 108 // 獲取元素 109 var $carousel = $("#carousel"); 110 var $imgLis = $("#unit li"); 111 var $leftBtn = $("#leftBtn"); 112 var $rightBtn = $("#rightBtn"); 113 var $circles = $("#circles ol li"); 114 var amount = $circles.length; //5 115 116 117 // 信號量 118 var idx = 0; 119 120 // 定時器 121 var timer = setInterval(rightBtnFun, 3000); 122 // 鼠標進入停止定時器 123 $carousel.mouseenter(function(){ 124 clearInterval(timer); 125 }); 126 // 鼠標離開重新開啟定時器 127 $carousel.mouseleave(function(){ 128 // 設表先關 129 clearInterval(timer); 130 timer = setInterval(rightBtnFun, 3000); 131 }); 132 133 134 // 右按鈕的點擊事件 135 $rightBtn.click(rightBtnFun); 136 function rightBtnFun(){ 137 // 當圖片運動時什麽都不做 138 if($imgLis.is(":animated")){ 139 return; 140 } 141 // 老圖退場-560 142 $imgLis.eq(idx).animate({"left": -560},500); 143 // 信號量改變 144 idx ++; 145 if(idx > amount - 1){ 146 idx = 0; 147 } 148 // 新圖保證從候場位置560入場0 149 $imgLis.eq(idx).css("left",560).animate({"left":0},500); 150 // 小圓點 151 $circles.eq(idx).addClass("cur").siblings().removeClass("cur"); 152 } 153 154 // 左按鈕點擊事件 155 $leftBtn.click(function(){ 156 if(!$imgLis.is(":animated")){ 157 // 老圖退場560 158 $imgLis.eq(idx).animate({"left":560},500); 159 // 信號量改變 160 idx --; 161 if(idx < 0){ 162 idx = amount - 1; 163 } 164 // 新圖從-560入場 165 $imgLis.eq(idx).css("left",-560).animate({"left":0},500); 166 // 小圓點 167 $circles.eq(idx).addClass("cur").siblings().removeClass("cur"); 168 } 169 }); 170 171 // 小圓點鼠標進入事件 172 $circles.mouseenter(function(){ 173 // 判斷當前信號量和觸發事件的小圓點序號大小 174 // 將觸發事件的小圓點序號保存 175 var i = $(this).index(); 176 177 // 如果i > idx，新圖從560入場 178 if(i > idx){ 179 // 老圖退場-560 180 $imgLis.eq(idx).stop(true).animate({"left": -560},500); 181 // 信號量改變 182 idx = i; 183 // 新圖入場 184 $imgLis.eq(idx).css("left",560).stop(true).animate({"left": 0},500); 185 }else if(i < idx){ 186 // 新圖從-560入場 187 // 老圖退場560 188 $imgLis.eq(idx).stop(true).animate({"left": 560},500); 189 // 信號量改變 190 idx = i; 191 // 新圖從-560入場 192 $imgLis.eq(idx).css("left",-560).stop(true).animate({"left": 0},500); 193 } 194 // 小圓點事件 195 $(this).addClass("cur").siblings().removeClass("cur"); 196 }); 197 198 199 200 201 202 203 204 205 206 207 </script> 208 </body> 209 </html>
【解決火車輪播圖小圓點跳的問題】傳統輪播圖-三位法