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>
