【解决火车轮播图小圆点跳的问题】传统轮播图-三位法 

  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" alt=""></a></li>
 87             <li><a href=""><img src="images/1.jpg" alt=""></a></li>
 88             <li><a href=""><img src="images/2.jpg" alt=""></a></li>
 89             <li><a href=""><img src="images/3.jpg" alt=""></a></li>
 90             <li><a href=""><img src="images/4.jpg" alt=""></a></li>
 91         </ul>
 92         <div class="btns">
 93             <a href="javascript:void(0);" class="leftBtn" id="leftBtn">&lt;</a>
 94             <a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</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>

 

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