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"><</a>
94 <a href="javascript:void(0);" class="rightBtn" id="rightBtn">></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>
