原生JS实现无缝轮播

客官°小女子只卖身不卖艺 2023-06-24 05:24 24阅读 0赞

今天分享前端开发学习中的一个很经典的案例——原生JS实现无缝轮播图。

需求：

1.鼠标移入轮播图时左右两边显示上一页下一页按钮，移出时隐藏

2.鼠标点击箭头，图片发生轮播

3.点击号码，切换到指定图片

4.鼠标移出，图片每隔一定时间自动轮播

5.当图片轮播到最后或最前一张的时候，图片无缝循环切换

HTML页面结构：这里把图片换成背景颜色了，使用时直接添加图片路径即可

CSS样式：样式部分比较简单，重点让li标签浮动并排，然后在盒子（类名为screen的div）里显示其中一张，其他的隐藏（overflow：hidden），整个轮播思想就是移动整个ul标签。

JS处理：

第一步：完成轮播图事件的添加 ：用一个全局变量index记录当前需要展示的图片的索引

（1）鼠标移入移出事件：鼠标移入，显示左右切换按钮，移出时隐藏

（2）上一页下一页按钮点击事件点击下一页：index++，点击上一页:index–

（3）页码点击事件：切换指定图片

（1）点击移动之前给ul添加边界检测：否则点击下一页会无限往右滚动

（2）修改当前索引（自增/自减），索引表示的是当前ul应该展示第几张图片

（3）移动ul（目标距离 = -index \* screen的宽度）

（4）页码保持同步（当前显示的是第几张图片，下方页码对应索引高亮）

第三步：完成无限轮播 核心思想：n+1

（1）常规思路：图片滚动时，当滚动到最后一张时，我们偷偷的快速改变ul的位置到第一张（不要动画，瞬间改变）

ul.style.left = ‘0px’;　//ul回到初始位置

index = 0;　//index恢复到0

（2）问题发现：这种方式可以实现无限轮播，但是在下一轮无限的时候第一张会被跳过去

原因：我们手动改变了index为0，而动画又需要index+1，所以会错过index为0的那一张

（3）解决方案：我们在最后一张图片的后面加上第一张图片（第6张）可以让用户看到滚动效果，然后滚动到第六张时，再改变ul回到初始位置

好处：①用户可以看到滚动效果，不影响体验; ②刚好第6张与第一张是同一张图片，快速改变位置不会造成动画的闪现

（4）当图片index为最后一张的的时候，页码应该显示第一个，因为最后一张和第一张是同一张图片

第四步：完成点击页码跳转

（1）点击的是第几个页码，移动动画的目标距离 = -index \* screen.offsetWidth

（2）排他思想改变页码样式

（3）页码的下标需要与图片下标index保持一致，否则会产生冲突，即点击页码的时候，要让图片下标index与页码下标一致

第五步：自动无限轮播

相当于每隔一段时间自动点击下一页按钮，代码逻辑完全不变

（1）将轮播代码封装成一个函数

（2）开启定时器，每隔一段时间执行这个函数

（3）鼠标移入时清除定时器，移出时开启定时器

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE_size_16_color_FFFFFF_t_70]  
条件有限 发不了动图哈哈

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191220220236257.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpb28xMjE=,size_16,color_FFFFFF,t_70