JS 实现轮播图效果 

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>轮播图</title>
  8 
  9     <!-- css start -->
 10     <style>
 11         * {
 12             margin: 0;
 13             padding: 0;
 14         }
 15 
 16         .box {
 17             width: 1024px;
 18             margin: 0 auto;
 19             background: rgba(251, 3, 3, 0.1);
 20         }
 21 
 22         header {
 23             height: 200px;
 24             background: rgba(3, 61, 253, 0.2);
 25         }
 26 
 27         nav {
 28             height: 200px;
 29             background: rgba(3, 246, 76, 0.2);
 30         }
 31 
 32         section {
 33             position: relative;
 34             margin: 50px auto;
 35             height: 768px;
 36             overflow: hidden;
 37             background-color: rgb(0, 0, 0);
 38         }
 39 
 40         footer {
 41             height: 200px;
 42             background: rgba(3, 3, 3, 0.5);
 43         }
 44 
 45         .pre {
 46             display: none;
 47             position: absolute;
 48             top: 50%;
 49             left: 0;
 50             width: 50px;
 51             height: 50px;
 52             font-size: 30px;
 53             z-index: 2;
 54 
 55         }
 56 
 57         .next {
 58             display: none;
 59             position: absolute;
 60             right: 0;
 61             top: 50%;
 62             width: 50px;
 63             height: 50px;
 64             font-size: 30px;
 65             z-index: 2;
 66         }
 67 
 68         section ul {
 69             position: absolute;
 70             top: 0;
 71             left: 0;
 72             /* 有几张图片就设置几倍 */
 73             width: 900%;
 74         }
 75 
 76         section ul li {
 77             list-style: none;
 78             float: left;
 79         }
 80 
 81         .dian {
 82             position: absolute;
 83             left: 40%;
 84             top: 75%;
 85 
 86             list-style: disc;
 87             font-size: 50px;
 88         }
 89 
 90         ol li {
 91             float: left;
 92             margin: 20px;
 93         }
 94 
 95         .current {
 96             color: rgb(255, 0, 21);
 97         }
 98         button{
 99             background-color: rgba(255, 255, 255,0.1);
100             border: rgb(249, 250, 250);
101         }
102         ul li img{
103             width: 1024px;
104             height: 768px;
105         }
106     </style>
107      <!-- css end -->
108 
109 
110     <!-- 引入动画js -->
111     <script src="../../JaveScript/animate.js"></script>
112 </head>
113 
114 <body>
115 
116     <div class="box">
117         <section>
118             <a href="javascript:;"> <button class="pre">&lt;</button> </a>
119             <a href="javascript:;"> <button class="next">&gt;</button> </a>
120 
121             <!-- 核心滚动区域 -->
122             <!-- 轮播图 -->
123             <ul>
124 
125                 <li>
126                     <a href=""><img src="../img/flyfordream.png" alt=""></a>
127                 </li>
128                 <li>
129                     <a href=""><img src="../img/WORLD_flaris.png" alt=""></a>
130                 </li>
131                 <li>
132                     <a href=""><img src="../img/WORLD_saint.png" alt=""></a>
133                 </li>
134                 <li>
135                     <a href=""><img src="../img/WORLD_ricis.png" alt="" ></a>
136                 </li>
137                 <li>
138                     <a href=""><img src="../img/WORLD_darkon12.png" alt="" ></a>
139                 </li>
140                 <li>
141                     <a href=""><img src="../img/WORLD_darkon3.png" alt="" ></a>
142                 </li>
143                 <li>
144                     <a href=""><img src="../img/WORLD_Flyff.png" alt="" ></a>
145                 </li>
146             </ul>
147             <ol class="dian">
148 
149             </ol>
150         </section>
151       
152 
153     </div>
154 
155 <!-- js start -->
156     <script>
157         window.addEventListener('load', function () {
158 
159             // 查找元素
160             var preBtn = document.querySelector('.pre')
161             var nextBtn = document.querySelector('.next')
162             var section = document.querySelector('section')
163             var ul = section.querySelector('ul')
164             var ol = section.querySelector('.dian')
165             var sectionWidth = section.offsetWidth
166 
167             //添加鼠标移入事件,显示按钮
168             section.addEventListener('mouseenter', function () {
169                 preBtn.style.display = 'block'
170                 nextBtn.style.display = 'block'
171 
172                 //当鼠标移入图片区域时,暂停自动播放图片
173                 clearInterval(timer)
174                 timer = null
175 
176             })
177 
178             //添加鼠标离开事件,隐藏按钮
179             section.addEventListener('mouseleave', function () {
180                 preBtn.style.display = 'none'
181                 nextBtn.style.display = 'none'
182 
183                 //当鼠标离开图片区域时,自动播放下一张图片
184                 timer = setInterval(function () {
185                     nextBtn.click()
186                 }, 3000)
187             })
188 
189             for (let i = 0; i < ul.children.length; i++) {
190                 //创建li
191                 var li = document.createElement('li')
192 
193                 //给li添加自定义属性 index
194                 li.setAttribute('index', i)
195 
196                 //添加到ul标签内
197                 ol.appendChild(li)
198 
199                 //给小圆点创建点击事件
200                 li.addEventListener('click', function () {
201                     for (let i = 0; i < ol.children.length; i++) {
202                         ol.children[i].className = ''
203                     }
204                     this.className = 'current'
205 
206                     //点击小圆点,执行图片位移动画,移动的是ul
207                     //ul的移动距离就是,小圆点的索引号 * 图片的宽度
208 
209 
210                     //点击小圆点后,获取index自定义属性
211                     var index = this.getAttribute('index')
212 
213                     //让小圆点和n 跟着 index 下标一起变
214                     n = index
215                     yd = index
216 
217                     //播放动画
218                     animation(ul, -index * sectionWidth)
219 
220                 })
221             }
222 
223             //将第一个li设置为current当前图片
224             ol.children[0].className = 'current'
225 
226             //克隆第一张图片到末尾
227             var firstPic = ul.children[0].cloneNode(true)
228 
229             //追加到ul末尾
230             ul.appendChild(firstPic)
231 
232 
233             var n = 0
234 
235             //控制小圆点的播放
236             var yd = 0
237 
238             //判断图片是否播放完毕,节流阀,防止点击图片过快导致动画错误
239             var flag = true
240 
241             //给右侧下一页按钮添加点击事件
242             nextBtn.addEventListener('click', function () {
243                 if (flag) {
244 
245                     flag = false
246 
247                     if (n == ul.children.length - 1) {
248                         ul.style.left = 0
249                         n = 0
250                     }
251                     n++
252 
253                     //播放动画
254                     animation(ul, -n * sectionWidth, function () {
255                         // 执行到这里,说明动画播放完毕,将节流阀设置为true开启状态,才能点击下一张图片
256                         flag = true
257                     })
258 
259                     yd++
260 
261                     if (yd == ol.children.length) {
262                         yd = 0
263                     }
264 
265                     //调用改变小圆点样式函数
266                     ChangeXyd()
267                 }
268             })
269 
270             //给左侧上一页按钮添加点击事件
271             preBtn.addEventListener('click', function () {
272                 if (flag) {
273                     flag = false
274 
275                     if (n == 0) {
276                         n = ul.children.length - 1
277                         ul.style.left = -n * sectionWidth + 'px'
278 
279                     }
280                     n--
281 
282                     //播放动画
283                     animation(ul, -n * sectionWidth,function(){
284                         flag = true
285                     })
286 
287                     yd--
288 
289                     // if (yd < 0) {
290                     //     yd = ol.children.length - 1
291                     // }
292 
293                     yd = yd < 0 ? ol.children.length - 1 : yd
294 
295                     //调用改变小圆点样式函数
296                     ChangeXyd()
297                 }
298 
299             })
300 
301             //改变小圆点样式函数
302             function ChangeXyd() {
303                 //清除其他小圆圈样式
304                 for (let i = 0; i < ol.children.length; i++) {
305                     ol.children[i].className = ''
306                 }
307                 //给当前小圆点添加样式
308                 ol.children[yd].className = 'current'
309             }
310 
311             //自动播放下一张图片
312             var timer = setInterval(function () {
313 
314                 //自动调用点击事件
315                 nextBtn.click()
316             }, 3000)
317         })
318     </script>
319     <!-- js end -->
320 
321 </body>
322 
323 </html>
HTML/CSS/JS

 

 1 function animation(obj, target,callback) {
 2 
 3     //让定时器唯一
 4     clearInterval(obj.timer)
 5     
 6     obj.timer = setInterval(function () {
 7         
 8         var step = (target - obj.offsetLeft) / 10
 9         //算元运算判断,如果步长值>0 就向上取整,否则就向下取整
10         step = step > 0 ? Math.ceil(step) : Math.floor(step)
11 
12         if (obj.offsetLeft == target) {
13             clearInterval(obj.timer)
14 
15             //判断是否有回调函数
16             // if(callback){
17             //     callback()
18             // }
19 
20             // 短路运算
21             //如果有传入参数,就执行callback()
22             //若没有,则返回
23             callback && callback()
24         }
25         obj.style.left = obj.offsetLeft + step + 'px'
26     },5)
27 }
animate.js

 

 

 

效果图

posted @ 2021-01-14 14:11  伊凡晴天  阅读(155)  评论(0)  编辑  收藏  举报