JS实现一个简单的轮播图

左手的ㄟ右手 2022-10-23 12:42 241阅读 0赞

轮播图是一个常见的组件，今天用js来实现一个简单的轮播图。

> ### 功能如下： ###
> 
> 1.自动轮播，有滑动效果。
> 
> 2.左右箭头可实现上一张下一张的切换，并作了节流处理。
> 
> 3.点击下方小圆点可切换至对应的图片。
> 
> 4.鼠标悬停至图片或小圆点处会暂停轮播，移开则继续。

--------------------

### 原理： ###

![轮播图原理图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY2MjI2OQ_size_16_color_FFFFFF_t_70]

如上图所示 ，以展示三张图且切换下一张为例。123数字代表图1，图2，图3，蓝色矩形框为可视范围，即轮播图展示的范围，其余图片均隐藏。

1.  状态A：页面的初始状态，默认显示第一张图片。
2.  状态B：整个图片列表向左移动，即可显示第二张图片。
3.  状态C：同状态B。
4.  状态D：此时又显示第一张图片（但对于图片列表而言是最后一张），需要切换为状态E即初始状态。**切换的过程需要修改整个图片列表的left值，且过渡时间设为0s。**
5.  完成了一轮循环。切换上一张同理。

--------------------

### 源码： ###

*  HTML

*  JS

*  CSS

.wrap {
                width: 880px;
                height: 305px;
                margin: 0 auto;
                /* border: 1px solid #333333; */
                position: relative;
                overflow: hidden;
            }
    
            .img-box {
                width: 880px;
                display: flex;
                position: absolute;
            }
    
            .btn {
                position: absolute;
                z-index: 1;
                width: 50px;
                height: 305px;
                line-height: 305px;
                text-align: center;
                font-size: 16px;
                color: #ffffff;
                font-weight: bold;
                cursor: pointer;
            }
    
            .btn:hover {
                background-color: rgba(240, 240, 235, 0.575);
            }
    
            .left {
                left: 0;
            }
    
            .right {
                right: 0;
            }
            
            .arrow {
                width: 15px;
                height: 15px;
            }
    
            .wrap ul{
                padding: 0;
                list-style: none;
                width: 880px;
                height: 15px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                bottom: 10px;
                z-index: 1;
            }
    
            .wrap ul li {
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background-color:rgb(204, 204, 204);
                margin: 0 5px;
            }

--------------------

### 实现效果： ###

![实现效果gif][gif]

--------------------

### 注意点： ###

*  首尾各加一张图的目的是为了初次点击时能有好的过渡效果，并且更便于背后的操作。
 *  一定要等过渡完成后才进行移动的暗箱操作，所以会使用延时器setTimeout，且时延===过渡时间。
 *  为防止用户点击速度过快，一定要进行节流处理。

--------------------

由于是前端小白，在写之前也参考了网上其他一些人的想法，逻辑和代码的规范还有很多不到位的地方需要更深入的学习。

参考资料：

[https://juejin.cn/post/6907648083081822216][https_juejin.cn_post_6907648083081822216]

[https://juejin.cn/post/6844903939159277576][https_juejin.cn_post_6844903939159277576]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY2MjI2OQ_size_16_color_FFFFFF_t_70]: /images/20221023/07bac7b768b14e4b8f9717db678e7049.png
[gif]: /images/20221023/991493d289574f3dadc2733c9468072b.png
[https_juejin.cn_post_6907648083081822216]: https://juejin.cn/post/6907648083081822216
[https_juejin.cn_post_6844903939159277576]: https://juejin.cn/post/6844903939159277576