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 .carousel .imgs ul li{
26 position: absolute;
27 left:0;
28 top:0;
29 width: 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 width: 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 width: 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 width: 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" ></a></li>
87 <li><a href=""><img src="images/aoyun/1.jpg" ></a></li>
88 <li><a href=""><img src="images/aoyun/2.jpg" ></a></li>
89 <li><a href=""><img src="images/aoyun/3.jpg" ></a></li>
90 <li><a href=""><img src="images/aoyun/4.jpg" ></a></li>
91 <li><a href=""><img src="images/aoyun/5.jpg" ></a></li>
92 <li><a href=""><img src="images/aoyun/6.jpg" ></a></li>
93 </ul>
94 </div>
95 <div class="btns">
96 <a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a>
97 <a href="javascript:void(0);" class="rightBtn" id="rightBtn">></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>
时间： 2024-10-04 18:37:11