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

 

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