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 560px; 20 height: 300px; 21 border: 1px solid #000; 22 margin:50px auto; 23 position: relative; 24 overflow: hidden; 25 } 26 .carousel .unit{ 27 /*火车宽度要足够大*/ 28 8888px; 29 height:300px; 30 position: absolute; 31 left:0px; 32 } 33 .carousel .unit li{ 34 /*图片并排显示*/ 35 float: left; 36 560px; 37 height: 300px; 38 } 39 .carousel .btns a{ 40 30px; 41 height: 60px; 42 position: absolute; 43 top:50%; 44 margin-top: -30px; 45 background-color: rgba(0,0,0,.5); 46 color:#fff; 47 font-size: 20px; 48 text-align: center; 49 line-height: 60px; 50 } 51 .carousel .btns a.leftBtn{ 52 left: 10px; 53 } 54 .carousel .btns a.rightBtn{ 55 right: 10px; 56 } 57 .carousel .circles{ 58 140px; 59 height:20px; 60 position: absolute; 61 left:50%; 62 margin-left: -70px; 63 bottom: 30px; 64 overflow: hidden; 65 66 } 67 .carousel .circles ol{ 68 150px; 69 } 70 .carousel .circles ol li{ 71 float: left; 72 20px; 73 height: 20px; 74 margin-right: 10px; 75 border-radius: 50%; 76 background-color: orange; 77 } 78 .carousel .circles ol li.cur{ 79 background-color: red; 80 } 81 82 83 </style> 84 </head> 85 <body> 86 <div class="carousel" id="carousel"> 87 <ul class="unit" id="unit"> 88 <li><a href=""><img src="images/0.jpg" alt=""></a></li> 89 <li><a href=""><img src="images/1.jpg" alt=""></a></li> 90 <li><a href=""><img src="images/2.jpg" alt=""></a></li> 91 <li><a href=""><img src="images/3.jpg" alt=""></a></li> 92 <li><a href=""><img src="images/4.jpg" alt=""></a></li> 93 </ul> 94 <div class="btns"> 95 <a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a> 96 <a href="javascript:void(0);" class="rightBtn" id="rightBtn">></a> 97 </div> 98 <div class="circles" id="circles"> 99 <ol> 100 <li class="cur"></li> 101 <li></li> 102 <li></li> 103 <li></li> 104 <li></li> 105 </ol> 106 </div> 107 </div> 108 <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 109 <script type="text/javascript"> 110 // 获取元素 111 var $carousel = $("#carousel"); 112 var $unit = $("#unit"); 113 var $leftBtn = $("#leftBtn"); 114 var $rightBtn = $("#rightBtn"); 115 var $circles = $("#circles ol li"); 116 var amount = $circles.length; //5 117 118 119 // 信号量可能性0,1,,2,3,4 120 // 信号量表示当前显示第几张图片 121 var idx = 0; 122 123 // 克隆第一张图片clone()追加到火车的最后appendTo 124 $unit.children("li:first").clone().appendTo($unit); 125 126 // 定时器 127 var timer = setInterval(rightBtnFun, 2000); 128 // 关闭定时器 129 $carousel.mouseenter(function(){ 130 clearInterval(timer); 131 }); 132 // 重新开启定时器 133 $carousel.mouseleave(function(){ 134 // 设表先关 135 clearInterval(timer); 136 timer = setInterval(rightBtnFun, 2000); 137 }); 138 139 // 右按钮的点击事件 140 // 策略：先拉动，再判断 141 $rightBtn.click(rightBtnFun); 142 function rightBtnFun(){ 143 // 图片运动什么都不做 144 if($unit.is(":animated")){ 145 return; 146 } 147 idx ++; 148 $unit.animate({"left": -560 * idx },700,function(){ 149 // 判断 150 if(idx > amount - 1){ 151 idx = 0; 152 // console.log(idx); 153 // 猫腻图瞬间移动到真图 154 $unit.css("left",0); 155 } 156 }); 157 // 小圆点改变 158 // 信号量有一段时间idx = 5 这是小圆点指示0 159 var i = idx <= amount - 1 ? idx : 0; 160 $circles.eq(i).addClass("cur").siblings().removeClass("cur"); 161 } 162 163 164 // 左按钮的点击事件 165 $leftBtn.click(function(){ 166 // 防流氓 167 if(!$unit.is(":animated")){ 168 // 策略先验证再拉动 169 // 0,1,2,3,4, 170 idx --; 171 if(idx < 0){ 172 idx = 4; 173 // 火车瞬间移动到猫腻图 174 $unit.css("left",-560 * amount); 175 } 176 $unit.animate({"left": -560 * idx},700); 177 // 小圆点 178 $circles.eq(idx).addClass("cur").siblings().removeClass("cur"); 179 } 180 }); 181 182 183 // 小圆点的鼠标进入事件 184 $circles.mouseenter(function(){ 185 idx = $(this).index(); 186 $unit.stop(true).animate({"left": -560 * idx},700); 187 // 小圆点改变 188 $(this).addClass("cur").siblings().removeClass("cur"); 189 }); 190 191 192 193 194 195 196 197 198 </script> 199 </body> 200 </html>