html+css+jquery实现轮播图自动切换、左右切换、点击切换

作者：盐析白兔 | 2024-02-25 13:27:29

踩

pc端也好、移动端也好，轮播图很常见，今天用html+css+jquery实现小米商城轮播图，套UI框架更容易实现

在这里插入图片描述

步骤1：把静态轮播图用div+css布局出来，采用盒子模型、相对绝对定位实现

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</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
116

效果如下图：
在这里插入图片描述

步骤2：实现轮播图自动切换

需要引入jquery；

<script src="static/js/jquery.min.js"></script>
1

定时器实现4s自动切换轮播图

<script>
    $(function () {
        var index = 0;
        setInterval(function () {
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            if ($(".box-img").length - 1 === index) {
                index = 0
            } else {
                index++;
            }
        }, 4000)
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.box-img {
    ...
    /* 设置属性是否透明，0是透明，1是不透明 */
    opacity: 0;
    /* 过渡效果，延迟1.5s */
    transition: 1.5s;
}

.box-img:nth-child(1) {
	/* 设置属性是否透明，0是透明，1是不透明，默认显示第一张轮播图 */
    opacity: 1;
}
1
2
3
4
5
6
7
8
9
10
11
12

完毕，轮播图能够自动切换了

步骤3：左右切换，左右点击事件手动切换

实现代码如下：

// 左右切换
$(".box-left").click(function () {
    // 点击左，index减1，减到最小时让成为最大
    if (index === 0) {
        index = $(".box-img").length - 1;
    } else {
        index--;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});
$(".box-right").click(function () {
    // 点击右，index加1，加到最大时让成为最小
    if (index === $(".box-img").length - 1) {
        index = 0;
    } else {
        index++;
    }
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

到目前存在自动切换轮播图，也存在手动切换轮播图。就可能存在手动切换时，又自动切换，客户体验就不太好，可以优化成，手动切换轮播图时，自动切换轮播图关掉，手动切换完成后，又开启自动切换轮播图。

优化后，自动切换和左右切换js代码如下：

<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            f();
        });
    })
</script>
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

步骤4：点击切换，点击圆点事件手动切换

代码如下：

$(".btn").click(function () {
    clearInterval(timer);
    // 获取第几个圆点
    index = $(this).index()
    // alert(index)
    $(".box-img").css("opacity", 0);
    $(".box-img").eq(index).css("opacity", 1);
    $(".btn").css("background-color", "#4a5460");
    $(".btn").eq(index).css("background-color", "#ffffff");
    f();
});
1
2
3
4
5
6
7
8
9
10
11

自动切换、左右切换，其对应圆点背景色也设置成白色

html+css+jquery实现轮播图自动切换、左右切换、点击切换，代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            height: 460px;
            width: 1000px;
            position: relative;
        }

        .box-img {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            transition: 1.5s;
        }

        .box-img:nth-child(1) {
            opacity: 1;
        }

        .box-img img {
            height: 460px;
            width: 1000px;
        }

        /*左右切换*/
        .box-left {
            position: absolute;
            left: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 0 5px 5px 0;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-left:hover {
            background-color: #777777;
            color: #ffffff;
        }

        .box-right {
            position: absolute;
            right: 0;
            top: 195px;
            width: 35px;
            height: 70px;
            border-radius: 5px 0 0 5px;
            text-align: center;
            line-height: 70px;
            font-size: 27px;
            color: #b0afad;
        }

        .box-right:hover {
            background-color: #777777;
            color: #ffffff;
        }

        /*圆点*/
        .box-dot {
            position: absolute;
            right: 50px;
            bottom: 20px;
        }

        .box-dot ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .box-dot ul li {
            width: 14px;
            height: 14px;
            border-radius: 100%;
            background-color: #4a5460;
            float: left;
            margin-right: 10px;
        }

        .box-dot ul li:hover, .box-dot ul li:nth-child(1) {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="box">
    <!-- 轮播图 -->
    <div class="box-img"><img src="static/image/1.jpg"></div>
    <div class="box-img"><img src="static/image/2.jpg"></div>
    <div class="box-img"><img src="static/image/6.jpg"></div>
    <div class="box-img"><img src="static/image/4.jpg"></div>
    <div class="box-img"><img src="static/image/5.jpg"></div>
    <div class="box-img"><img src="static/image/3.jpg"></div>
    <!-- 左右切换 -->
    <div class="box-left">&lt;</div>
    <div class="box-right">&gt;</div>
    <!-- 圆点 -->
    <div class="box-dot">
        <ul>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
            <li class="btn"></li>
        </ul>
    </div>
</div>
</body>
<script src="static/js/jquery.min.js"></script>
<script>
    $(function () {
        var index = 0;
        var timer;

        // 自动切换
        function f() {
            var timer = setInterval(function () {
                $(".box-img").css("opacity", 0);
                $(".box-img").eq(index).css("opacity", 1);
                $(".btn").css("background-color", "#4a5460");
                $(".btn").eq(index).css("background-color", "#ffffff");
                if ($(".box-img").length - 1 === index) {
                    index = 0
                } else {
                    index++;
                }
            }, 4000);
        }

        f();
        // 左右切换
        $(".box-left").click(function () {
            clearInterval(timer);
            // 点击左，index减1，减到最小时让成为最大
            if (index === 0) {
                index = $(".box-img").length - 1;
            } else {
                index--;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        $(".box-right").click(function () {
            clearInterval(timer);
            // 点击右，index加1，加到最大时让成为最小
            if (index === $(".box-img").length - 1) {
                index = 0;
            } else {
                index++;
            }
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
        // 点击圆点切换轮播图
        $(".btn").click(function () {
            clearInterval(timer);
            // 获取第几个圆点
            index = $(this).index()
            // alert(index)
            $(".box-img").css("opacity", 0);
            $(".box-img").eq(index).css("opacity", 1);
            $(".btn").css("background-color", "#4a5460");
            $(".btn").eq(index).css("background-color", "#ffffff");
            f();
        });
    })
</script>
</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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/141056