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              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              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              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              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              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

效果图

时间若流水,恍惚间逝去

相关阅读:
Python入门11 —— 基本数据类型的操作
 Win10安装7 —— 系统的优化
 Win10安装6 —— 系统的激活
 Win10安装5 —— 系统安装步骤
 Win10安装4 —— 通过BIOS进入PE
Win10安装2 —— 版本的选择与下载
 Win10安装1 —— 引言与目录
 Win10安装3 —— U盘启动工具安装
 虚拟机 —— VMware Workstation15安装教程
 Python入门10 —— for循环
原文地址：https://www.cnblogs.com/alanshreck/p/14276949.html