如何用JS实现轮播图！

太过爱你忘了你带给我的痛 2023-01-14 07:58 120阅读 0赞

# 轮播图 #

## 1.思路与写法 ##

**1.1** 首先我们拿到一个关于轮播图的实例我们要分析里面的功能，将其模块化处理；

**1.2** 首先需要实现的是自动轮播的效果：  
**1.2.1**需要用到运动函数框架，startMove()，还需要用到定时器，这里我们用的是多次调用的延时定时器达到效果；  
**1.2.2**对dom元素的操作，获取它的样式；

**1.3**其次实现上下按钮实现上一页和下一页的切换，对其绑定鼠标点击事件，同时需要获取该元素的节点；

**1.4**最后实现底部的小圆圈的固定切换，需要对其绑定鼠标点击事件，这里用到获取该元素的节点，利用排他思想改变样式实现动态切换！

## 2.结果示意图： ##

（如图是**鼠标点击状态**和**点击底部小圆点**以及**自动轮播**效果，图片大小有限制就没能展示太长！！！）  
![在这里插入图片描述][20210423143203275.gif_pic_center]

## 3.参考代码： ##

**html部分：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        
        <link rel="stylesheet" href="../css/index.css">
        
        <script src="../js/index01.js"></script>
        
        <script src="../js/index.js"></script>
    </head>
    <body>
        <div class="father">
            <ul class="one">
                <li class="son1">
                    <img src="../image/1.jpg" alt="">
                </li>
                <li class="son2">
                    <img src="../image/2.jpg" alt="">
                </li>
                <li class="son3">
                    <img src="../image/3.jpg" alt="">
                </li>
                <li class="son4">
                    <img src="../image/4.jpg" alt="">
                </li>
                <li class="son5">
                    <img src="../image/5.jpg" alt="">
                </li>
                <li class="son6">
                    <img src="../image/6.jpg" alt="">
                </li>
                <li class="son7">
                    <img src="../image/1.jpg" alt="">
                </li>
            </ul>
            <button class="btn1"><</button>
            <button class="btn2">></button>
            <div class="two">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </body>
    </html>

**js部分1（运动函数）：**

**js部分2（对页面元素进行操作）：**

**css部分：**

*{ 
        margin: 0px;
        padding: 0px;
    }
    .father{ 
        width: 400px;
        height: 400px;
        /* border: 1px solid red; */
        overflow: hidden;
        margin: 200px auto;
        position: relative;
        
    }
    .father .one{ 
        width: 2800px;
        height: 100%;
        /* border: 1px solid black; */
        margin-top: 0px;
        /* margin-left: -40px; */
        position: absolute;
        left: 0;
        top: 0;
    }
    .father .one li{ 
        list-style: none;
        width: 400px;
        height: 100%;
        float: left;
        
    }
    .father .one li img{ 
        width: 400px;
        height: 100%;
        
    }
    button{ 
        width: 40px;
        height: 40px;
        background-color: black;
        opacity: 0.2;
        color: white;
        text-align: center;
        line-height: 40px;
        font-size: 30px;
        position: absolute;
        top: 50%;
    
    }
    .father:hover button{ 
        opacity: 0.7;
    }
    .father .btn1{ 
        left: 0px;
    }
    .father .btn2{ 
        right: 0px;
    }
    .father .two{ 
        width: 100%;
        height: 50px;
        /* background-color: blue; */
        position: absolute;
        bottom: 10px;
        text-align: center;
        line-height: 60px;
    }
    .father .two span{ 
        display: inline-block;
        width: 18px;
        height: 18px;
        border: 1px solid black;
        margin-left: 3px;
        border-radius: 50%;  
    }
    .father .two .active{ 
        background-color: brown;
    }

## 4.总结： ##

了解到轮播图的原理后，进行模块儿化处理的时候写很简单，可以实现单个模块比如：自动轮播、上下页的切换、小圆圈固定切换，这些功能单独写出来很容易，写到一起的时候会出现很多bug，这就要考虑到**多个定时器的同时进行产生的影响，所以要及时在特定的时候清楚定时器来消除影响**，（代码量可以精简，欢迎大家可以多多提意见！）

[20210423143203275.gif_pic_center]: /images/20221022/7c46705ede13405caef1393edea5145e.png