js实现点击轮播图

谁践踏了优雅 2023-07-12 05:12 6阅读 0赞

## 效果图 ##

**今天讲下如何利用js做个点击操作的轮播图，效果图如下，因为无法传视频，只能截图了，代码在下面讲解，需要可以自己打出来运行。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]

## HTML和CSS ##

**首先第一步先写好HTML和需要的CSS样式，**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]  
html和css相对比较简单，上述代码就是先给个容器，用来做定位，在给图片一个容器用来存放图片，同时加个列表做点击的小圆点。然后给外围容器加一张图片的宽高，再加上相对定位 ，至于margin的设置只是为了使其距离浏览器边缘一段距离，可以不要。  
然后给包裹图片的容器加上所有图片总共宽度和绝对定位，使其定位在最外围的容器里，加上font-size只是为了解决图片之间有默认空隙的的问题，加上后图片就是挨着排列在一行，最后在最外围容器加上溢出隐藏，这样就只能看到一张图片了。最后我给图片固定宽度是因为我找的图片宽不一样，有的小了就不好看了，最后加上过渡是使变化可以看清。

最后就是可以点击的小圆点用列表做，但是没有用它的默认样式，而是通过样式使其改成了小圆点，同样定位到最外围容器上，调整好距离。设置display使其变成内联块，这样既能一行排列也能支持宽高，非常方便，font-size效果与上述图片时一样。

## JavaScript (js操作) ##

**然后就是js操作**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 3]代码不多，大约就是十来行。是写js时必须用到的，单独的js文件除外，跟CSS的用法一样，写的位置不定，只要在html标签中就行，但尽量写在body里的最下面。

var用来定义变量，js常用,变量名不同单词组合时第二个单词首字母尽量大写，这里定义了四个变量，preLi是用来存放上一次的状态，div是找到图片容器的返回值，就是一个容器。liList是用来存放列表的每一项的数组，Array.from()方法就是用来把返回的容器组合转换为数组。position用来记录点击的是哪一个。

for循环是使点击每一个li都会触发点击事件，进入下面的点击处理函数执行。

点击处理函数里面的e可写可不写，函数中的第一行代码就是从数组中查找点击的li是第几个；  
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置，然后就是设置包裹图片容器的CSS样式定位，点击的是第几个li就让图片往左移几个图片的距离。

最后判断一下上次的状态，存在就把上次的li样式改变下，下面就是把现在的li给preLi保存，同时改变样式。一次又一次的点击，preLi保存的上一次的值不断改变，同时被不断赋予新的值。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200307102605548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200307102621192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020030710312014.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200307105640382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTAwMDgxNA==,size_16,color_FFFFFF,t_70