原生js写轮播图

AA小瑶~

已于 2023-01-03 16:36:10 修改

阅读量185

点赞数

文章标签： java Powered by 金山文档

于 2023-01-03 15:55:07 首次发布

本文链接：https://blog.csdn.net/weixin_73158514/article/details/128534412

版权

原生js写轮播图

功能需求：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

2.点击右侧按钮一次，图片往左播放一张，左侧按钮同理。

3.图片播放的同时，下面的小圆圈模块也跟随一起变化。

5.鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。

轮播图向右移动的时候要用到缓动画的函数，具体见博客JS案例-添加缓动画_setTimeout()的博客-CSDN博客

（1）布局：轮播图部分的图片用ul进行布局，里面的每个li放a标签，a标签里面再放img；ul需要采用定位，目的是为了后面使用缓动画（要使用缓动画必须有定位），然后ul里面的li都浮动起来在一行显示，ul的宽度可以设置成轮播图宽度的600%（这里只要比400%大就可以，因为这里放的是四张轮播图），然后给轮播图模块设置overflow:hidden就只会展示一张图片了。下面小圆点采用绝对定位，左右两边按钮也采用绝对定位。

（2）功能1：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮

非常简单，就是给轮播图模块添加mouseenter和mouseleave事件即可。

（3）功能2：根据图片张数动态添加小圆点

通过获得ul里面li的个数来判断一共需要添加多少个小圆点，但是这里要注意，因为后面需要实现轮播图效果，所以最后一张图片放的第一张图片，相当于会比原本的图片多一张，所以这里小圆点生成的个数是图片张数减一，通过document.createElement('li')创建小圆点，然后通过appendChild添加到小圆点列表中。

（4）功能3：点击右侧按钮一次，图片往左播放一张，左侧按钮同理。

这个功能是最复杂的功能，这个功能做好了，后面的自动播放功能就很简单了，那么现在来说说这个功能的思路：

（5）功能4：图片播放的同时，下面的小圆圈模块也跟随一起变化。

再声明一个变量circle，点击一次按钮，自增1，然后这个变量对应小圆点坐标，把当前坐标的小圆点的类改为current（即变色）,但是要注意，在滚动到最后一张图片的时候，因为ul会快速不做动画跳到最左侧，同时把num设置为0，然后再进行num++执行滑动到第二张图片，相当于这一次点击操作执行了两个步骤：滑动到最左侧同时执行缓动画移动到第二张图片，这样看起来就会很顺畅，看起来像是从最后一张图片滚动到第一张图片。但是小圆点并没有最后一张图的坐标，也就是小圆点数量和图片数量并不是相等的，这样就会导致当滑动到最后一张图片（与第一张图片相同的那张图片）的时候小圆点一个都没有选中，所以需要提前判断是否滑动到最后一张，要是滑动到最后一张就把最后一个小圆点的类设置成current。

（6）功能5：点击小圆圈，可以播放相应的图片。

这个功能采用给小圆圈设置自定义属性实现。

（7）功能6：鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。

这个功能其实就是鼠标离开的时候手动调用点击右边按钮的函数，放上去的时候就清除定时器即可。

代码图片如下：

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="#"><img class="img" src="

最低0.47元/天解锁文章

AA小瑶~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
原生js写轮播图

功能需求：1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮2.点击右侧按钮一次，图片往左播放一张，左侧按钮同理。3.图片播放的同时，下面的小圆圈模块也跟随一起变化。5.鼠标不经过轮播图，轮播图会自动向右播放图片，经过轮播图之后停止自动播放图片。轮播图向右移动的时候要用到缓动画的函数，具体见博客JS案例-添加缓动画_setTimeout()的博客-CSDN博客（1）布局：轮播图部分的图片用ul进行布局，里面的每个li放a标签，a标签里面再放img；ul需要采用定位，目的是为了后面
复制链接

扫一扫