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              900px;
 20             height: 540px;
 21             border: 1px solid #000;
 22             margin:50px auto;
 23             position: relative;
 24         }
 25         .carousel .imgs ul li{
 26             position: absolute;
 27             left:0;
 28             top:0;
 29              900px;
 30             height: 540px;
 31             display: none;
 32         }
 33         .carousel .imgs ul li:first-child{
 34             display: block;
 35         }
 36         .carousel .btns a{
 37             position: absolute;
 38             top:50%;
 39             margin-top: -30px;
 40              30px;
 41             height: 60px;
 42             text-align: center;
 43             line-height: 60px;
 44             font-size: 20px;
 45             background-color: rgba(0,0,0,.6);
 46             color:#fff;
 47         }
 48         .carousel .btns a.leftBtn{
 49             left:10px;
 50         }
 51         .carousel .btns a.rightBtn{
 52             right: 10px;
 53         }
 54         .carousel .circles{
 55              200px;
 56             height: 20px;
 57             position: absolute;
 58             left:50%;
 59             margin-left: -100px;
 60             bottom: 30px;
 61         }
 62         .carousel .circles ol li{
 63             float: left;
 64              20px;
 65             height: 20px;
 66             border-radius: 50%;
 67             margin-right: 10px;
 68             background-color: orange;
 69             color:#000;
 70             text-align: center;
 71             line-height: 20px;
 72         }
 73         .carousel .circles ol li.cur{
 74             background-color: red;
 75         }
 76         .carousel .circles ol li:last-child{
 77             margin-right: 0;
 78         }
 79 
 80     </style>
 81 </head>
 82 <body>
 83     <div class="carousel" id="carousel">
 84         <div class="imgs" id="imgs">
 85             <ul>
 86                 <li><a href=""><img src="images/aoyun/0.jpg" alt=""></a></li>
 87                 <li><a href=""><img src="images/aoyun/1.jpg" alt=""></a></li>
 88                 <li><a href=""><img src="images/aoyun/2.jpg" alt=""></a></li>
 89                 <li><a href=""><img src="images/aoyun/3.jpg" alt=""></a></li>
 90                 <li><a href=""><img src="images/aoyun/4.jpg" alt=""></a></li>
 91                 <li><a href=""><img src="images/aoyun/5.jpg" alt=""></a></li>
 92                 <li><a href=""><img src="images/aoyun/6.jpg" alt=""></a></li>
 93             </ul>
 94         </div>
 95         <div class="btns">
 96             <a href="javascript:void(0);" class="leftBtn" id="leftBtn">&lt;</a>
 97             <a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</a>
 98         </div>
 99         <div class="circles" id="circles">
100             <ol>
101                 <li class="cur">1</li>
102                 <li>2</li>
103                 <li>3</li>
104                 <li>4</li>
105                 <li>5</li>
106                 <li>6</li>
107                 <li>7</li>
108             </ol>
109         </div>
110     </div>
111     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
112     <script type="text/javascript">
113         // 获取元素
114         var $carousel = $("#carousel");
115         var $imgLis = $("#imgs ul li");
116         var $leftBtn = $("#leftBtn");
117         var $rightBtn = $("#rightBtn");
118         var $circlesLis = $("#circles ol li");
119         var amount = $imgLis.length;
120 
121 
122         // 信号量
123         var idx = 0;
124 
125 
126         // 定时器
127         var timer = setInterval(rightBtnFun,3000);
128 
129         // 鼠标进入停止定时器
130         $carousel.mouseenter(function(){
131             clearInterval(timer);
132         });
133 
134         // 鼠标离开重新开启定时器
135         $carousel.mouseleave(function(){
136             // 设表先关
137             clearInterval(timer);
138             timer = setInterval(rightBtnFun,3000);
139         });
140 
141         // 右按钮点击事件
142         $rightBtn.click(rightBtnFun);
143 
144         // 右按钮的点击事件
145         function rightBtnFun(){
146             // 防流氓
147             if($imgLis.is(":animated")){
148                 return;
149             }
150             // 老图消失
151             $imgLis.eq(idx).fadeOut(500);
152             // 信号量改变
153             idx ++;
154             if(idx > amount - 1){
155                 idx = 0;
156             }
157             // 新图淡入
158             $imgLis.eq(idx).fadeIn(1000);
159             // 小圆点改变
160             $circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
161         }
162 
163 
164         // 左按钮点击事件
165         $leftBtn.click(function(){
166             // 防流氓
167             if(!$imgLis.is(":animated")){
168                 // 老图消失
169                 $imgLis.eq(idx).fadeOut(500);
170                 // 信号量改变
171                 idx --;
172                 if(idx < 0){
173                     idx = amount - 1;
174                 }
175                 // 新图淡入
176                 $imgLis.eq(idx).fadeIn(1000);
177                 // 小圆点改变
178                 $circlesLis.eq(idx).addClass("cur").siblings().removeClass(    "cur");
179                 };    
180         });
181 
182 
183         // 小圆点事件
184         $circlesLis.mouseenter(function(){
185             // 老图淡出
186             $imgLis.eq(idx).stop(true).fadeOut(500);
187             // 信号量改变
188             idx = $(this).index();
189             // 新图淡入
190             $imgLis.eq(idx).stop(true).fadeIn(1000);
191             // 校园点改变
192             $(this).addClass("cur").siblings().removeClass("cur");
193         });
194 
195 
196 
197 
198 
199         
200 
201 
202         
203 
204 
205 
206 
207     </script>
208 </body>
209 </html>