jq传统火车轮播图 

  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{
 27             /*火车宽度要足够大*/
 28             width:8888px;
 29             height:300px;
 30             position: absolute;
 31             left:0px;
 32         }
 33         .carousel .unit li{
 34             /*图片并排显示*/
 35             float: left;
 36             width: 560px;
 37             height: 300px;
 38         }
 39         .carousel .btns a{
 40             width: 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             width: 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             width: 150px;
 69         }
 70         .carousel .circles ol li{
 71             float: left;
 72             width: 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">&lt;</a>
 96             <a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</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>

 

posted @ 2017-12-19 20:25  ︶ㄣ鳯躌氷瀚  阅读(235)  评论(0)    收藏  举报