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" ></a></li>
89 <li><a href=""><img src="images/aoyun/1.jpg" ></a></li>
90 <li><a href=""><img src="images/aoyun/2.jpg" ></a></li>
91 <li><a href=""><img src="images/aoyun/3.jpg" ></a></li>
92 <li><a href=""><img src="images/aoyun/4.jpg" ></a></li>
93 <li><a href=""><img src="images/aoyun/5.jpg" ></a></li>
94 <li><a href=""><img src="images/aoyun/6.jpg" ></a></li>
95 </ul>
96 </div>
97 <div class="btns">
98 <a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a>
99 <a href="javascript:void(0);" class="rightBtn" id="rightBtn">></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>
时间： 2024-11-05 01:31:31