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         .carousel{
 12             height:665px;
 13             overflow: hidden;
 14             position: relative;
 15         }
 16         .carousel .imgs{
 17             width:1920px;
 18             height:665px;
 19             position: absolute;
 20             left:50%;
 21             margin-left: -960px;
 22         }
 23         .carousel .imgs li{
 24             /*呼吸轮播图所有图片摞一起*/
 25             position: absolute;
 26             left:0;
 27             top:0;
 28             width: 100%;
 29             height:665px;
 30             display: none;
 31         }
 32         .carousel .imgs li:first-child{
 33             display: block;
 34         }
 35         .carousel .inner{
 36             width: 1000px;
 37             margin:0 auto;
 38             position: relative;
 39         }
 40         .carousel .inner .circles{
 41             list-style: none;
 42             position: absolute;
 43             width: 15px;
 44             height:257px;
 45             background: url(images/longxi/list_boxbg.png) repeat-y center top;
 46             top:150px;
 47         }
 48         .carousel .inner .circles li{
 49             width: 15px;
 50             height: 15px;
 51             background: url(images/longxi/num_bg.png) no-repeat;
 52             margin-bottom: 70px;
 53             position: relative;
 54         }
 55         .carousel .inner .circles li a{
 56             position: absolute;
 57             width: 104px;
 58             height: 43px;
 59             background: url(images/longxi/num_hover.png);
 60             left:-77px;
 61             top:-17px;
 62             display: none;
 63         }
 64         .carousel .inner .circles li.cur a{
 65             display: block;
 66         }
 67         .carousel .inner .circles li:nth-child(2) a{
 68             background-image: url(images/longxi/num_hover2.png);
 69         }
 70         .carousel .inner .circles li:nth-child(3) a{
 71             background-image: url(images/longxi/num_hover3.png);
 72         }
 73         .carousel .inner .circles li:nth-child(4) a{
 74             background-image: url(images/longxi/num_hover4.png);
 75         }
 76     </style>
 77 </head>
 78 <body>
 79     <div class="carousel" id="carousel">
 80         <div class="imgs" id="imgs">
 81             <ul>
 82                 <li><img src="images/longxi/1.jpg" alt=""></li>
 83                 <li><img src="images/longxi/2.jpg" alt=""></li>
 84                 <li><img src="images/longxi/3.jpg" alt=""></li>
 85                 <li><img src="images/longxi/4.jpg" alt=""></li>
 86             </ul>
 87         </div>
 88         <div class="inner">
 89             <ol class="circles" id="circles">
 90                 <li class="cur"><a href=""></a></li>
 91                 <li><a href=""></a></li>
 92                 <li><a href=""></a></li>
 93                 <li><a href=""></a></li>
 94             </ol>
 95         </div>
 96     </div>
 97     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 98     <script type="text/javascript">
 99         // 获取元素
100         var $imgLis = $("#imgs ul li");
101         var $carousel = $("#carousel");
102         var $circles = $("#circles li");
103         var amount = $imgLis.length;
104 
105 
106         // 信号量
107         var idx = 0;
108         // 页面加载后开启定时
109         var timer = setInterval(rightBtnFun, 3000);
110         // 鼠标进入停止定时器
111         $carousel.mouseenter(function(){
112             clearInterval(timer);
113         });
114         // 鼠标离开重新开启定时器
115         $carousel.mouseleave(function(){
116             // 设表先关
117             clearInterval(timer);
118             timer = setInterval(rightBtnFun, 3000);
119         });
120 
121 
122         // 小圆点的鼠标进入事件
123         $circles.mouseenter(function(){
124             // 老图淡出
125             $imgLis.eq(idx).stop(true).fadeOut(800);
126             // 信号量
127             idx = $(this).index();
128             // 新图淡入
129             $imgLis.eq(idx).stop(true).fadeIn(1000);
130             // 小圆点改变
131             $(this).addClass("cur").siblings().removeClass("cur");
132         });
133         // 右按钮的点击事件
134         function rightBtnFun(){
135             // 当元素不运动时才执行事件
136             if(!$imgLis.is(":animated")){
137                 // 老图淡出
138                 $imgLis.eq(idx).fadeOut(800);
139                 // 信号量
140                 idx ++;
141                 if(idx > amount - 1){
142                     idx = 0;
143                 }
144                 // 新图淡入
145                 $imgLis.eq(idx).fadeIn(1000);
146                 // 小圆点事件
147                 $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
148             }
149         }
150     </script>
151 </body>
152 </html>

 

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