原生JS代实现 轮播图案例_轮播图demo 原生

这里带来的是，轮播图的自动切换效果，以及手动干预的情况下，轮播图展示效果的 demo，供大家参考，谢谢支持。

 首先需要设置一个用来呈现图片的页面结构，并赋以一定的样式布局
1

<style>
    #anment {
        width: 300px;
        height: 300px;
        border: 1px solid;
        margin: auto;
        position: relative;
    }
    #anment>img {
        width: 300px;
        height: 300px;
    }
    #anment>div:nth-child(2) {
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: chocolate;
        position: absolute;
        right: 0;
        top: 50%;
    }
    #anment>div:nth-child(3) {
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: cadetblue;
        position: absolute;
        left: 0;
        top: 50%;
    }
    #ul {
        width: 70px;
        height: 20px;
        position: absolute;
        top: 90%;
        left: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    li {
        width: 15px;
        height: 15px;
        border-radius: 60%;
        list-style: none;
        background-color: rgba(255, 255, 255, .4);
    }
<div id="anment">
        <img src="img/下载 (1).jpg" alt="">
        <div id="boxright"></div>
        <div id="boxleft"></div>
        <div id="ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

第二步：首先需要获取布局里面显示区域的整个div， img 图片，和左右两个切换键

let anment = document.getElementById('anment');   //div大框

let img = document.querySelector('img') //img图片
 
let boxright = document.getElementById('boxright');          //获取向右切换键

let boxleft = document.getElementById('boxleft');         //获取向左切换键
1
2
3
4
5
6
7

第三步：.声明一个数组，用来放，轮播切换的图片的路径

 let hoer = ['下载 (1).jpg', '下载 (2).jpg', '下载 (3).jpg', '下载.jpg'];    
1

第四步：获取div下面的里标签

let li = document.querySelectorAll('div>li');
1

第五步：声明一个 i 当做下标，初始化值为0 ，再声明一个num，赋值为空

let i = 0, num = null;   //下标 
1

第六步：.创建一个函数，正序切换时的函数，用来当作控制轮播下面的4个对应小点，i++ 自增，，if 条件判断，如果 i 自增到 等于 数组的长度时，就从新把 i 的下标赋值为0，让他重复循环切换。 因为此时的 i 就是代表每一个下标， 所以此处 也可以给上面获取的 img 图片 src 赋值为 i。

 function tprt() {       
            i++           
            if (i == hoer.length) {
                i = 0
            }
            img.src = `img/${hoer[i]}`       //  img 图片的某一个图片下标
        }
1
2
3
4
5
6
7

第七步：设置图片切换时，对应的下标小点，有颜色变化，，首先让 获取到 li 的 数组 的 item 的每个下标，初始默认颜色为半透明色。然后再让，切换到某个具体的下标的时候，对应的颜色为白色

li.forEach(item => item.style.backgroundColor = 'rgba(255, 255, 255, .4)');    //每个原点默认为透明色

 li[i].style.backgroundColor = '#fff';         //移动到某一个下标时，对应的原点才变色
1
2
3

第八步：设置一个时钟，默认状态下，正序切换移动。，时钟的执行内容是引用的， 步骤 5声明的函数，，把这个时钟声明赋值给上面的声明的变量num，存放，，执行逻辑是，每隔1 秒，执行一次，引用的函数

 num = setInterval(tprt, 1000); 
1

第九步：设置鼠标移入时停止，轮播效果, 首先声明一个鼠标移入的事件，，移入了过后，发生的事件函数是，停止时钟，，而需要停止时钟的对象是，上面存放 时钟的 num

anment.onmouseenter = (function () {         //移入鼠标时停止
            clearInterval(num);
        });
1
2
3

第十步：鼠标移除时，继续默认切换移动，首先声明一个鼠标移出事件，移出过后，发生的事件函数是，时钟，而需要时钟变化的对象就是，步骤7设置的时钟，直接把它放进去，移出过后，就执行步骤7

anment.onmouseleave = (function () {         //鼠标移除时继续切换移动
            num = setInterval(tprt, 1000);
        });
1
2
3

第十一步：设置点击方向右切换键时，图片手动切换。首先声明一个，点击事件函数，并绑定事件源，由于我是正序手动切换，和默认自动切换时同序的，并且是通过点击事件才能触发，所以这里的事件函数就直接调用步骤5的切换函数.

 boxright.onclick = (function () {      //点击向右方向键切换
            tprt();
        });
1
2
3

第十二步：设置点击方向左切换，声明点击事件绑定对应的事件源。 由于这里是向左，和默认呈反序切换，所以这里的事件函数为 i–，当 i 小于0时，为i 赋值 为数组长度减一，当做下标，同样的，倒序切换时，原点的颜色，默认为半透明，移动到其中一个对应的下标时，变换颜色

 boxleft.onclick = (function () {      //点击向左方向键切换
            i--;
            if (i < 0) {
                i = hoer.length - 1;          //i的下标为，数组长度减一
            }
            img.src = `img/${hoer[i]}`
            li.forEach(item => item.style.backgroundColor = 'rgba(255, 255, 255, .4)');
            li[i].style.backgroundColor = '#fff';
        });
1
2
3
4
5
6
7
8
9

第十三步：设置，点击原点时，原点对应的下标图片也会同步切换

for (let index = 0; index < li.length; index++) {         //index 小于4个小点的长度
            li[index].onclick = function () {                 //数组里面拿到每一个下标时，绑定点击函数
                i = index - 1;                   //由于调用函数时，函数里面已经提前自增了，所以，我们在调用前，提前减去一个1，用来抵消调用函数里面的自增    
                tprt();                //点击某个原点时对应执行调用函数里面的事件
            }
        }
1
2
3
4
5
6

合并代码

<!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>
</head>
<style>
    #anment {
        width: 300px;
        height: 300px;
        border: 1px solid;
        margin: auto;
        position: relative;
    }
    #anment>img {
        width: 300px;
        height: 300px;
    }
    #anment>div:nth-child(2) {
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: chocolate;
        position: absolute;
        right: 0;
        top: 50%;
    }
    #anment>div:nth-child(3) {
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: cadetblue;
        position: absolute;
        left: 0;
        top: 50%;
    }
    #ul {
        width: 70px;
        height: 20px;
        position: absolute;
        top: 90%;
        left: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    li {
        width: 15px;
        height: 15px;
        border-radius: 60%;
        list-style: none;
        background-color: rgba(255, 255, 255, .4);
    }
</style>
<body>
    <div id="anment">
        <img src="img/下载 (1).jpg" alt="">
        <div id="boxleft"></div>
        <div id="boxright"></div>
        <div id="ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </div>
    </div>
    <script>
        let img = document.querySelector('img');  //获取img图片
        let hoer = ['下载 (1).jpg', '下载 (2).jpg', '下载 (3).jpg', '下载.jpg']               //切换的图片数组
        let boxright = document.getElementById('boxleft');          //获取向右切换键
        let boxleft = document.getElementById('boxright');         //获取向左切换键
        let anment = document.getElementById('anment');     //获取整个大框
        let li = document.querySelectorAll('div>li');
        let i = 0, num = null; //下标 
        function tprt() {        //正序自动切换函数
            i++
            if (i == hoer.length) {
                i = 0
            }
            img.src = `img/${hoer[i]}`
            li.forEach(item => item.style.backgroundColor = 'rgba(255, 255, 255, .4)');    //每个原点默认为透明色
            li[i].style.backgroundColor = '#fff';         //移动到某一个下标时，对应的原点才变色
        }
        num = setInterval(tprt, 1000);         //默认正序切换移动
        anment.onmouseenter = (function () {         //移入鼠标时停止
            clearInterval(num)
        })
        anment.onmouseleave = (function () {         //鼠标移除时继续切换移动
            num = setInterval(tprt, 1000);
        })
        boxright.onclick = (function () {      //点击向右方向键切换
            tprt();
        })
        boxleft.onclick = (function () {      //点击向左方向键切换
            i--;
            if (i < 0) {
                i = hoer.length - 1;
            }
            img.src = `img/${hoer[i]}`
            li.forEach(item => item.style.backgroundColor = 'rgba(255, 255, 255, .4)');
            li[i].style.backgroundColor = '#fff';
        })
        for (let index = 0; index < li.length; index++) {         //index 小于4个小点的长度
            li[index].onclick = function () {                 //数组里面拿到每一个下标时，绑定点击函数
                i = index - 1;                   //由于调用函数时，函数里面已经提前自增了，所以，我们在调用前，提前减去一个1，用来抵消调用函数里面的自增    
                tprt();
            }
        }
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

效果展示：由于需求只是实现轮播图的自动轮播效果，所以看上去捡漏了点，嘿嘿！