【博主推荐】html好看的图片轮播多种风格（源码）_html5轮播图代码效果图

作者：Li_阴宅 | 2024-07-09 22:02:33

踩

html5轮播图代码效果图

多种轮播效果图，支持配置，可以自动切换，鼠标拖动，角标按钮切换，不一样的切换效果，可以直接嵌入项目使用，简单灵活。

代码结构

所有轮播图动态效果展示

xcLeigh - 轮播图

1.普通自带按钮切换轮播图

纯css写的轮播图，仅支持按钮切换

1.1 效果展示

在这里插入图片描述

1.2 源码

<!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>xcLeigh - 轮播图</title>
    <style>
        /*使轮播图弹性布局，居中设置最小高度*/
        body{
            display: flex;
            justify-content: center;
			margin:0px;padding:0px;
            align-items: center;
           /* 1vh 意味着值为视口高度的 1%,vh 则与设备视口的高度有关 */
             min-height: 100vh;
        }
        /* 定义一个图片轮播区域 */
        ul.slides{
            position: relative;
            width: 600px;
            height: 280px;
            list-style: none;
            margin: 0;
            padding: 0;
            background-color: #eee;
            overflow: hidden;
        }
    /* 设置每个图片的从左往右弹性盒子排版以及水平垂直居中 */
        li.slide{
            margin: 0;
            padding: 0;
            width: inherit;
            height: inherit;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            /* font-family: Helvetica;
            font-size: 120px;
            color: #fff; */
            transition: .5s transform ease-in-out;
        }
 
        /* 为6个li添加背景图 */
        .slide:nth-of-type(1){
            background:url(img/p1.jpg) no-repeat;
            background-size: cover;
            background-position: top;
        }

        .slide:nth-of-type(2){
            background:url(img/p2.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 100%;
        }
 
        .slide:nth-of-type(3){
            background:url(img/p3.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 200%;
        }
 
        .slide:nth-of-type(4){
            background:url(img/p4.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 300%;
        }
 
        .slide:nth-of-type(5){
            background:url(img/p5.jpg) no-repeat;
            background-size: cover;
            background-position: top;
            left: 400%;
        }
 
        /* 设置按钮作为相对定位和覆盖图片区域 */
        input[type="radio"]{
            position: relative;
            z-index: 100;
            display: none;
        }
 
        /* 设置与label相关联的按钮的位置 */
        .controls-visible{
            position: absolute;
            width: 100%;
            bottom: 12px;
            text-align: center;
        }
 
        /* 设置这一组6个label的排列方式并且设置它们的初始样式为白色带有白色边框(以便于选中的变化效果明显) */
        .controls-visible  label{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: 0 5px;
            border: 2px solid #fff;
        }
        /* 当点击label同时按钮被选中时，与之联动定位的label样式发生改变 */
        .slides input[type="radio"]:nth-of-type(1):checked~
        .controls-visible label:nth-of-type(1)
        {
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(2):checked~
        .controls-visible label:nth-of-type(2)
        {
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(3):checked~
        .controls-visible label:nth-of-type(3)
        {
 
            background-color:#333;
        }
        .slides input[type="radio"]:nth-of-type(4):checked~
        .controls-visible label:nth-of-type(4)
        {
            background-color: #333;
        }
        .slides input[type="radio"]:nth-of-type(5):checked~
        .controls-visible label:nth-of-type(5)
        {
            background-color: #333;
        }
        /* 当按钮radio被选中时，后面的兄弟元素向左移动一个图片区域距离 */
        .slides input[type="radio"]:nth-of-type(1):checked~.slide{
 
            transform: translateX(0%);
 
        }
        .slides input[type="radio"]:nth-of-type(2):checked~.slide{
 
            transform: translateX(-100%);
 
        }
        .slides input[type="radio"]:nth-of-type(3):checked~.slide{
 
            transform: translateX(-200%);
 
        }
        .slides input[type="radio"]:nth-of-type(4):checked~.slide{
 
            transform: translateX(-300%);
 
        }
        .slides input[type="radio"]:nth-of-type(5):checked~.slide{
 
            transform: translateX(-400%);
 
        }
    </style>
</head>
 
<body>
    <!-- 用ul包裹三个组件 -->
    <ul class="slides">
        <!-- 设置6个radio按钮 -->
        <input type="radio" id="control-1" name="control" checked>
        <input type="radio" id="control-2" name="control">
        <input type="radio" id="control-3" name="control">
        <input type="radio" id="control-4" name="control">
        <input type="radio" id="control-5" name="control">
       <!-- 设置处于按钮之后的同一级6个兄弟元素li -->
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <li class="slide"></li>
        <!-- 设置label与input相关联 -->
        <div class="controls-visible">
            <label for="control-1"></label>
            <label for="control-2"></label>
            <label for="control-3"></label>
            <label for="control-4"></label>
            <label for="control-5"></label>
        </div>
    </ul>
</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
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
188

2.自动切换图片

JS+CSS写的自动切换图片

2.1 效果展示

在这里插入图片描述

2.2 源码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<style type="text/css">
/* 标签选择器 */
p {
    text-align: center;
    font-size: 25px;
    color: cadetblue;
    font-family: fantasy;
}
/* id选择器 */
#hr1 {
    background-color: cadetblue;
    height: 2px;
    width: 75%;
}
/* 类选择器 */
.imgbox {
    border-top: 5px solid cadetblue;
   /* 避免因窗口变化影响图片效果 */
    width: 60%;
    height: 40%;
    margin: 0 auto;
}
.img {
    width: 60%;
    height: 40%;
    margin: 0 auto;
    display: none;
}
</style>
        <title>xcLeigh - 轮播图</title>
    </head>
    <body>
        <!-- 建立一个div控件作为图片框 -->
        <div class="imgBox">
            <!-- alt：图片路径失败时替换显示内容 -->
            <img class="img-slide img" src="img/s1.png" alt="img1">
            <img class="img-slide img" src="img/s2.png" alt="img2">
            <img class="img-slide img" src="img/s3.png" alt="img3">
            <img class="img-slide img" src="img/s4.png" alt="img4">
            <img class="img-slide img" src="img/s5.png" alt="img5">
        </div>
    </body>
    <script type="text/javascript">
        // index：索引， len：长度
        var index = 0, len;
        // 类似获取一个元素数组
        var imgBox = document.getElementsByClassName("img-slide");
        len = imgBox.length;
        imgBox[index].style.display = 'block';
        // 逻辑控制函数
        function slideShow() {
            index ++;
            // 防止数组溢出
            if(index >= len) index = 0;
            // 遍历每一个元素
            for(var i=0; i<len; i++) {
                imgBox[i].style.display = 'none';
            }
            // 每次只有一张图片显示
            imgBox[index].style.display = 'block';
        }
        // 定时器，间隔3s切换图片
        setInterval(slideShow, 3000);
    </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