学过-html-都会的-html-轮播图

发表于 | 分类于 | 阅读次数 |
字数统计 6524
为什么说学过html都会?因为我也刚学没多久，所运用的知识都是基础，两种方法创建出简单的轮播图

开篇(唠嗑)

为什么说学过html都会?

因为我也刚学没多久，所运用的知识都是基础

两种方法创建出简单的轮播图

1.通过 javascript 去解决图片轮播

网页预览[github可能图片加载的有点慢]

由于博客无法加载动图，只能点进去查看

2.通过引用 bootstrap 去创建轮播图

网页预览[github可能图片加载的有点慢]

由于博客无法加载动图，只能点进去查看

轮播图Javascript方法

预览

由于博客无法加载动图，只能点进去查看

1.先创建 div 去容纳要放进去的内容

！id 随意，但不能重复！

1
2
3
4
5
6
7
8
9
10
11
12
	<div id="ppt">
		<!-- 按钮 -->
        <div class="il">&lt;-</div>
        <div class="ir">-&gt;</div>
        <!-- 图片对应的点，有多少张图片就放多少点 -->
        <div id="ppt_dot">
            <div id="pd1"></div>
            <div id="pd2"></div>
            <div id="pd3"></div>
            <div id="pd4"></div>
        </div>
    </div>

================================================================================================

2.写css修饰

1)先将 ppt 的整体设置好 [ #ppt ]

1
2
3
	position: absolute;
    width: 100%;
    height:600px;

将图片设为背景

1
	background-image:url(./top/top1.png);

url 所对应的路径要看好，不然图片不会出来 ./文件夹 为根目录的文件夹 ../文件夹 为返回上一级的文件夹 将图片背景设置为不重复

1
	background-repeat: no-repeat;

让图片背景宽度填满高度自动，且图片背景居中

1
2
	background-size: 100% auto;
    background-position: -50% 50%;

ppt 整体的代码为

1
2
3
4
5
6
7
8
9
10
11
	#ppt{
	    position: absolute;
	    width: 100%;
	    height:600px;
	    /* 将图片设成不重复 */
	    background-repeat: no-repeat;
	    background-image:url(./top/top1.png);
	    /* 调整图片位置 */
	    background-size: 100% auto;
	    background-position: -50% 50%;
	}

==============================================================================

2) 按钮的css[ .il 和 .ir ]

调整按钮大小

1
2
	width:50px;
	height:50px;

调整按钮位置

1
2
3
	position: absolute;
	top: 30%;
	left: 3%;

设置按钮颜色 白色

1
	background-color: aliceblue;

装饰下按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	/* 只是为了让内容水平垂直居中 */
	line-height: 48px;
	text-align: center;
	
	/* 设置圆角边框 */
	border-radius: 5px;

	/* 设置透明度 */
	opacity: 0.3;

	/* 设置动画 */
	transition: opacity 500ms;
	-webkit-transition: opacity 500ms;
	
	/* 鼠标放在按钮上改变透明度 */
	.ir:hover{
    	opacity: 0.8;
	}

整体的按钮代码(左右按钮只是将 left 改成 right )

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
	.il{
	    width:50px;
	    height:50px;
	    /* 调整按钮位置 */
	    position: absolute;
	    top: 30%;
	    left: 3%;/* 左右按钮不一样的地方*/
	    /* 按钮颜色 */
	    background-color: aliceblue;
	    /* 装饰按钮 */
	    line-height: 48px;
	    text-align: center;
	    border-radius: 5px;
	    opacity: 0.3;
	    transition: opacity 500ms;
	    -webkit-transition: opacity 500ms;
	}
	.il:hover{
	    opacity: 0.8;
	}
	.ir{
    width:50px;
    height:50px;
    /* 调整按钮位置 */
    position: absolute;
    top: 30%;
    right: 3%;/* 左右按钮不一样的地方*/
    /* 按钮颜色 */
    background-color: aliceblue;
    /* 装饰按钮 */
    line-height: 48px;
    text-align: center;
    border-radius: 5px;
    opacity: 0.3;
    transition: opacity 500ms;
    -webkit-transition: 500ms;
}
.ir:hover{
    opacity: 0.8;
}

================================================================================================

3)装点的 div[ #ppt_dot ]

设置位置，设置大小，得看你由多少张图片对应多少点设置

1
2
3
	position: absolute;
    width:200px;
    height:30px;

将背景设置成透明 并将 div 设置到底端

1
2
	background: none;
    bottom:0px;

居中 div

1
2
	left: 50%;
    margin-left:-100px;

flex 布局使点在同一条线上

1
	display: flex;

整体代码如下

1
2
3
4
5
6
7
8
9
10
#ppt_dot{
    position: absolute;
    width:200px;
    height:30px;
    background: none;
    bottom:0px;
    left: 50%;
    margin-left:-100px;
    display: flex;
}

================================================================================================

4)每个点的css[ #pd1 #pd2 #pd3 #pd4 ]

设置点大小

1
2
	width:10px;
    height: 10px;

设置点 没选中 时的颜色[这个颜色为黑灰色]

1
	background:rgb(34, 34, 34);

设置点垂直位置[根据自己喜好调]

1
2
	position: relative;
    margin-top: 10px;

设置每个点的空隙[数值越大，空隙越大]

1
	margin-left: 25px;

设置边框圆角，让 方点 变成 圆点 [想用方点调小或删掉即可] 如果自定了点的大小，想设置成圆点，圆角数值应为大小的一半

1
	border-radius: 5px;

设置点的透明度[也可以不用加]

1
	opacity: 0.8;

整体代码如下

1
2
3
4
5
6
7
8
9
10
#pd1,#pd2,#pd3,#pd4{
    width:10px;
    height: 10px;
    background:rgb(34, 34, 34);
    position: relative;
    margin-top: 10px;
    margin-left: 25px;
    border-radius: 5px;
    opacity: 0.8;
}

3.写JavaScript让图片动起来

写之前需要在开头定义个变量 这个变量可以设置为你图片序号的任意数字 但最好还是1

1
var img = 1;

1)改变图片

先创建个方法，让图片能变成其他的图片

先用个变量获取 id

1
	var a = document.getElementById("ppt");

再用 变量.style.backgroundImage=”url(图片路径)”;

img变量用来储存序号，最好将图片名字重命名为可以由数字序号排列的名字

例如：img1.png img2.png img3.png ……

“url(./top/top”+img+”.png)” 可能有变量难理解[高手除外哈]

假设四张图片，

其实这个路径就是从 top1.png => top4.png 中切换

我这个代码的第一个top是文件夹，第二个top是文件名+序号

1
	a.style.backgroundImage="url(./top/top"+img+".png)";

整体代码

1
2
3
4
5
6
7
function change_img(){
    var a = document.getElementById("ppt");
    //                      "url(./top/top"+图片序号+".png)"
    //                            路径|     图片名    |图片后缀
    // 改变 css 中的 background-Image
    a.style.backgroundImage="url(./top/top"+img+".png)";
}

2)改变点的颜色

先用变量获取 id

1
2
3
4
	var a = document.getElementById("pd1");
    var b = document.getElementById("pd2");
    var c = document.getElementById("pd3");
    var d = document.getElementById("pd4");

通过 switch 来判断 img

记得在定义方法时引入变量

1
2
3
4
5
6
7
8
9
10
switch(img){
	case 1:
		break;
	case 2:
		break;
	case 3:
		break;
	case 4:
		break;
}

最后在每个对应的变量，去设置点的颜色

通过 变量.style.backgroundColor=”颜色”;

去改变 css 中的 background-Color 属性

1
2
3
4
	a.style.backgroundColor="颜色";
    b.style.backgroundColor="颜色";
    c.style.backgroundColor="颜色";
    d.style.backgroundColor="颜色";

最后代码拼接起来，整体如下

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
// 改变点的颜色
function change_dot(img){
    var a = document.getElementById("pd1");
    var b = document.getElementById("pd2");
    var c = document.getElementById("pd3");
    var d = document.getElementById("pd4");
    // 通过 switch 去判断并改变 css 中的 background-Color
    switch(img){
        case 1:
            a.style.backgroundColor="rgb(202, 202, 202)";
            b.style.backgroundColor="rgb(34, 34, 34)";
            c.style.backgroundColor="rgb(34, 34, 34)";
            d.style.backgroundColor="rgb(34, 34, 34)";
            break;
        case 2:
            a.style.backgroundColor="rgb(34, 34, 34)";
            b.style.backgroundColor="rgb(202, 202, 202)";
            c.style.backgroundColor="rgb(34, 34, 34)";
            d.style.backgroundColor="rgb(34, 34, 34)";
            break;
        case 3:
            a.style.backgroundColor="rgb(34, 34, 34)";
            b.style.backgroundColor="rgb(34, 34, 34)";
            c.style.backgroundColor="rgb(202, 202, 202)";
            d.style.backgroundColor="rgb(34, 34, 34)";
            break;
        case 4:
            a.style.backgroundColor="rgb(34, 34, 34)";
            b.style.backgroundColor="rgb(34, 34, 34)";
            c.style.backgroundColor="rgb(34, 34, 34)";
            d.style.backgroundColor="rgb(202, 202, 202)";
            break;
    }
}

3)向左向右切换图片

向左向右切换图片无非就是改变变量

向左:变量-1 向右:变量+1

1
2
	img--;//向左
	img++;//向右

但是不能一直减下去

通过 if 去判断，并将 变量img 设置成 开头或结尾

1
2
3
4
5
6
	if(img<=0){//当图片已经是最前面一张时，再次点击会使 img = 4
        img=4;
    }
    if(img>=5){//当图片已经是最后面一张时，再次点击会使 img = 1
        img=1;
    }

把改变图片的方法和改变点的方法放到最后

能使图片变换时不会切换到图片序号为 0 或 5 的图片

1
2
	change_img();
    change_dot(img);

然后我们需要将方法跟按钮绑定

用 onclick = “方法” 绑定

1
2
	<div class="il" onclick="ppt_left()">&lt;-</div>
    <div class="ir" onclick="ppt_right()">-&gt;</div>

整体代码如下

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 向左切换图片
function ppt_left(){
    img--;
    if(img<=0){
        img=4;
    }
    change_img();
    change_dot(img);
}
// 向右切换图片
function ppt_right(){
    img++;
    if(img>=5){
        img=1;
    }
    change_img();
    change_dot(img);
}

html

1
2
3
4
5
6
7
8
9
10
11
12
	<div id="ppt">
		<!-- 按钮 -->
        <div class="il" onclick="ppt_left()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</div>
        <!-- 图片对应的点，有多少张图片就放多少点 -->
        <div id="ppt_dot">
            <div id="pd1"></div>
            <div id="pd2"></div>
            <div id="pd3"></div>
            <div id="pd4"></div>
       	</div>
    </div>

4)开始轮播图片

为了让图片隔一段时间切

运用 setInterval 来定义一个计时器

格式为 变量 = setInterval (函数,延迟);

我想让他向左轮播

那就用我们刚刚定义的 向左改变图片 的方法去 改变图片:

1
	ppt_time = setInterval("ppt_left()",3000);

我想让他向右轮播

那就用我们刚刚定义的 向右改变图片 的方法去 改变图片:

1
	ppt_time = setInterval("ppt_right()",3000);

为了让网页一打开，图片就开始轮播，那就需要再 js 最顶部，

加入 window.onloadstart = 方法名 ;

最好时在 img变量 的下面

这样网页一打开，就会运行 开始轮播方法

1
	window.onloadstart=ppt_start();//页面打开运行函数

整体代码

1
2
3
4
5
6
7
window.onloadstart=ppt_start();//页面打开运行函数
function ppt_start(){
	change_dot(img);//引用改变点颜色函数
    ppt_time = setInterval("ppt_right()",3000);
    // 设置计时器轮播图片,越小越快，可以向左轮播，也可以向右轮播，该函数即可
    // 计时器以毫秒计算，3000 即 3s=3000ms
}

5)停止轮播图片

通过 clearInterval(计时器变量) 来停止清除刚刚创建的计时器

1
	clearInterval(ppt_time);

当我们想自己切换图片，但又不想在切换时自动轮播图片，

我们就可以在 div 中加入 onmouseover=”方法名“ 的属性，

使得鼠标放在 div 上时，运行 停止轮播 方法

1
	<div id="ppt" onmouseover="ppt_stop()"></div>

当我们看完想看的图片后，将鼠标移走想让其继续轮播图片时

用 onmouseleave=”方法名” 属性，让鼠标移离 div 时，继续轮播

1
	<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()"></div>

整体代码

js

1
2
3
4
// 停止函数
function ppt_stop(){
    clearInterval(ppt_time);
}

html

1
2
3
4
5
6
7
8
9
10
11
	<!-- 按钮 -->
    <div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
        <div class="il" onclick="ppt_left()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</div>
        <div id="ppt_dot">
            <div id="pd1"></div>
            <div id="pd2"></div>
            <div id="pd3"></div>
            <div id="pd4"></div>
        </div>
    </div>

6)点击对应点切换对应图片

因为点击 点 然后切换图片 所以我们得先将 img 设置成对应点的 点

1
	img = 1;

然后再改变图片

1
2
    change_img();
    change_dot(img);

然后再将方法绑定到 点 上 通过 onclick = “方法名”;

1
2
<!--     id             方法函数名    -->
<div id="pd1" onclick="click_dot1()"></div>

整体代码

有多少点，就定义多少方法，按照图片序号，去改变方法名和变量 js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//每个点的被点击切换对应图片
function click_dot1(){
    img=1;
    change_img();
    change_dot(img);
}
function click_dot2(){
    img=2;
    change_img();
    change_dot(img);
}
function click_dot3(){
    img=3;
    change_img();
    change_dot(img);
}
function click_dot4(){
    img=4;
    change_img();
    change_dot(img);
}

html

1
2
3
4
5
6
7
8
9
10
11
<!-- 按钮 -->
    <div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
        <div class="il" onclick="ppt_left()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</div>
        <div id="ppt_dot">
            <div id="pd1" onclick="click_dot1()"></div>
            <div id="pd2" onclick="click_dot2()"></div>
            <div id="pd3" onclick="click_dot3()"></div>
            <div id="pd4" onclick="click_dot4()"></div>
        </div>
    </div>

javascript篇结束

通过 html+css+javascript 的运用，使得图片能够轮播

没啥技术含量，学得差不多，有逻辑，就能想的出来

整体代码

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入css -->
    <link rel="stylesheet" href="index.css">
    <title>轮播图</title>
</head>
<!-- 引入js -->
<script src="index.js">
</script>
<body>
    <!-- 按钮 -->
    <div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()">
        <div class="il" onclick="ppt_left()">&lt;-</div>
        <div class="ir" onclick="ppt_right()">-&gt;</div>
        <div id="ppt_dot">
            <div id="pd1" onclick="click_dot1()"></div>
            <div id="pd2" onclick="click_dot2()"></div>
            <div id="pd3" onclick="click_dot3()"></div>
            <div id="pd4" onclick="click_dot4()"></div>
        </div>
    </div>
</body>
</html>

css

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
#ppt{
    position: absolute;
    width: 100%;
    height:600px;
    /* 将图片设成不重复 */
    background-repeat: no-repeat;
    background-image:url(./top/top1.png);
    /* 调整图片位置 */
    background-size: 100% auto;
    background-position: -50% 50%;
}
.il{
    width:50px;
    height:50px;
    /* 调整按钮位置 */
    position: absolute;
    top: 30%;
    left: 3%;
    /* 按钮颜色 */
    background-color: aliceblue;
    /* 装饰按钮 */
    line-height: 48px;
    text-align: center;
    border-radius: 5px;
    opacity: 0.3;
    transition: opacity 500ms;
    -webkit-transition: opacity 500ms;
}
.il:hover{
    opacity: 0.8;
}
.ir{
    width:50px;
    height:50px;
    /* 调整按钮位置 */
    position: absolute;
    top: 30%;
    right: 3%;
    /* 按钮颜色 */
    background-color: aliceblue;
    /* 装饰按钮 */
    line-height: 48px;
    text-align: center;
    border-radius: 5px;
    opacity: 0.3;
    transition: opacity 500ms;
    -webkit-transition: 500ms;
}
.ir:hover{
    opacity: 0.8;
}
/* 装点的盒子 */
#ppt_dot{
    position: absolute;
    width:200px;
    height:30px;
    background: none;
    bottom:0px;
    left: 50%;
    margin-left:-100px;
    display: flex;
}
/* 调整每个点位置 */
#pd1,#pd2,#pd3,#pd4{
    width:10px;
    height: 10px;
    background:rgb(34, 34, 34);
    position: relative;
    margin-top: 10px;
    margin-left: 25px;
    border-radius: 5px;
    opacity: 0.8;
}

js

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
var img = 1;//起始图片序号
window.onloadstart=ppt_start();//页面打开运行函数

// 开始函数
function ppt_start(){
    ppt_time = setInterval("ppt_right()",3000);
    // 设置计时器轮播图片,越小越快，可以向左轮播，也可以向右轮播，该函数即可
    // 计时器以毫秒计算，3000 即 3s=3000ms
    change_dot(img);//引用改变点颜色函数
}
// 停止函数
function ppt_stop(){
    clearInterval(ppt_time);
}
// 向左切换图片
function ppt_left(){
    img--;
    if(img<=0){
        img=4;
    }
    change_img();
    change_dot(img);
}
// 向右切换图片
function ppt_right(){
    img++;
    if(img>=5){
        img=1;
    }
    change_img();
    change_dot(img);
}
// 改变点的颜色
function change_dot(img){
    var a = document.getElementById("pd1");
    var b = document.getElementById("pd2");
    var c = document.getElementById("pd3");
    var d = document.getElementById("pd4");
    // 通过 switch 去判断并改变 css 中的 background-Color
    switch(img){
        case 1:
            a.style.backgroundColor="rgb(202, 202, 202)";
            b.style.backgroundColor="rgb(34, 34, 34)";
            c.style.backgroundColor="rgb(34, 34, 34)";
            d.style.backgroundColor="rgb(34, 34, 34)";
            break;
        case 2:
            a.style.backgroundColor="rgb(34, 34, 34)";
            b.style.backgroundColor="rgb(202, 202, 202)";
            c.style.backgroundColor="rgb(34, 34, 34)";
            d.style.backgroundColor="rgb(34, 34, 34)";
            break;
        case 3:
            a.style.backgroundColor="rgb(34, 34, 34)";
            b.style.backgroundColor="rgb(34, 34, 34)";
            c.style.backgroundColor="rgb(202, 202, 202)";
            d.style.backgroundColor="rgb(34, 34, 34)";
            break;
        case 4:
            a.style.backgroundColor="rgb(34, 34, 34)";
            b.style.backgroundColor="rgb(34, 34, 34)";
            c.style.backgroundColor="rgb(34, 34, 34)";
            d.style.backgroundColor="rgb(202, 202, 202)";
            break;
    }
}
//每个点的被点击切换对应图片
function click_dot1(){
    img=1;
    change_img();
    change_dot(img);
}
function click_dot2(){
    img=2;
    change_img();
    change_dot(img);
}
function click_dot3(){
    img=3;
    change_img();
    change_dot(img);
}
function click_dot4(){
    img=4;
    change_img();
    change_dot(img);
}
// 改变图片的函数
function change_img(){
    var a = document.getElementById("ppt");
    //                      "url(./top/top"+图片序号+".png)"
    //                            路径|     图片名    |图片后缀
    // 改变 css 中的 background-Image
    a.style.backgroundImage="url(./top/top"+img+".png)";
}

轮播图bootstrap方法

由于博客无法加载动图，只能点进去查看

准备说明

bootstrap 可以说是 html 的一个库，通过 bootstrap 我们可以通过给的模板，直接创建一个轮播图组件

我们得先将 bootstrap库 给下载下来

去下载====> 官网 <====去下载

打不开官网的话，点 这里

但是尽量在官网下，迫不得已再点 这里

我们制作的轮播图，仅仅只是用到了库里的 bootstrap.css 和 bootstrap.js 文件

我们通过创建 html 来引入这两货，就能简单的制作出轮播图

接下来，一步一步，教你创建轮播图，其实你可以跳转到最后，直接抄模板

1.引入 bootstrap 的两个文件

在 head 中，引入两个库

1
2
	<link rel="stylesheet" href="bootstrap.css">
	<script src="bootstrap.js"></script>

整体代码

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css">
    <title>轮播图bootstrap</title>
    <script src="bootstrap.js"></script>
</head>
<body>
</body>
</html>

2.创个 div 装轮播图

创建个 div 去装轮播图，通过 data-bs-ride 属性，来获取 bootstrap库 里的 carousel 创建轮播图组件

将 class 类设置为 carousel slide [除了 ppt 可以改成任意名字外，其他的别动]

ppt 为轮播图组件的 id

data-bs-interval 属性为设置轮播图播放速度，以 毫秒/ms 为单位

1
	<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000"></div>

3.轮播图的设置

1)首先在 ppt 里，再创个 div ，将 class 类设置为 carousel-inner 。

1
2
3
4
	<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
		 <div class="carousel-inner"> <!-- 这里这里，到这里了 -->
		 </div>
	</div>

2)在 class 为 carousel-inner 的类下，创建 div ，要多少图片，就创建多少 div 。

3)将每个 div 的 class 类为 carousel-item 。

4)有个特殊的 class 为 carousel-item active ，这个 div 则是第一个展示的 div

1
2
3
4
5
6
7
8
9
10
	<div class="carousel-inner"> 
		 <div class="carousel-item active"> <!-- 这里这里，到这里了 -->
    	 </div>
    	 <div class="carousel-item">
    	 </div>
    	 <div class="carousel-item">
    	 </div>
    	 <div class="carousel-item">
    	 </div>
	</div>

5)在每个 class 为 carousel-item 的 div 中，用 img 去引用图片，将 class 都设置为 d-block，并将宽度都设置为 100%

1
	<img src="top1.png" class="d-block" style="width:100%">

整体代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
		 <div class="carousel-inner"> 
		 	<div class="carousel-item active"> 
		 		<img src="top1.png" class="d-block" style="width:100%"> <!-- 这里这里，到这里了 -->
    	 	</div>
    	 	<div class="carousel-item">
    	 		<img src="top2.png" class="d-block" style="width:100%">
    	 	</div>
    	 	<div class="carousel-item">
    	 		<img src="top3.png" class="d-block" style="width:100%">
    	 	</div>
    	 	<div class="carousel-item">
    	 		<img src="top4.png" class="d-block" style="width:100%">
    	 	</div>
		 </div>
	</div>

4.设置下栏的小横杠[即为JavaScript版的点]

1)在 ppt 下，创建 div ，将 class 类设置为 carousel-indicators

1
2
	<div class="carousel-indicators">
  	</div>

2)在此类里，用 li 或者 button 创建出按钮 [这里我用 li ]

3)将每个按钮都增加上 data-bs-target 属性，属性设置为轮播图组件的 id，记得 #

4)将每个按钮都增加上 data-bs-slide-to 属性，属性设置为轮播图序号，以 0 开头

5)将第一个，或者你想让哪张图片先展示，就添加 class 为 active 的类

1
2
3
4
	<li data-bs-target="#ppt" data-bs-slide-to="0" class="active"></li>
	<li data-bs-target="#ppt" data-bs-slide-to="1"></li>
	<li data-bs-target="#ppt" data-bs-slide-to="2"></li>
	<li data-bs-target="#ppt" data-bs-slide-to="3"></li>

整体代码如下

这个 div 在 ppt 的 div 里

1
2
3
4
5
6
	<div class="carousel-indicators">
		<li data-bs-target="#ppt" data-bs-slide-to="0" class="active"></li>
		<li data-bs-target="#ppt" data-bs-slide-to="1"></li>
		<li data-bs-target="#ppt" data-bs-slide-to="2"></li>
		<li data-bs-target="#ppt" data-bs-slide-to="3"></li>
  	</div>

5.左右切换按钮

1)在 ppt 下，创建两个按钮

1
2
	<button></button>
   	<button></button>

2)两个按钮的 class 分别为 carousel-control-prev 和 carousel-control-next

===================[看英文都知道 prev 之前，即往左 next 下一个，即向右]

1
2
	<button class="carousel-control-prev"></button>
   	<button class="carousel-control-next"></button>

3) 属性 type 都为 button ， 属性 data-bs-target 都为 #ppt

1
2
	<button class="carousel-control-prev" type="button" data-bs-target="#ppt"></button>
   	<button class="carousel-control-next" type="button" data-bs-target="#ppt"></button>

4)绑定 bootstrap库 自定的 js

通过属性 data-bs-slide 分别设置为 prev 和 next ————————————————-向左—-向右

1
2
	<button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev"></button>
   	<button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next"></button>

5)在 button 里加入 span 属性，去引入图标

这是内置的左图标

1
<span class="carousel-control-prev-icon"></span>

这是内置的右图标

1
<span class="carousel-control-next-icon"></span>

你也可以自定义图标，可以自己通过 css 去自定义按钮的大小[默认的按钮很大]

这些都是可以自定义样式的，包括下面的 小横杠[点]

整体代码如下

1
2
3
4
5
6
	<button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev">
   		<span class="carousel-control-prev-icon"></span>
   	</button>
   	<button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next">
     	<span class="carousel-control-next-icon"></span>
   	</button>

bootstrap篇结束

bootstrap库 ，可以让我们更快，更方便的创建一个轮播图组件，提升效率，而且还可以自定义

完整代码

我仅仅只是给按钮添加了点逐渐明显的动画

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.css">
    <title>Document</title>
    <script src="bootstrap.js"></script>
    <style>
    /* 自定的按钮动画 */
      .carousel-control-prev{/* 这里这里 */
        opacity: 0.3;/* 这里这里 */
        transition: all 500ms;/* 这里这里 */
      }/* 这里这里 */
      .carousel-control-next{/* 这里这里 */
        opacity: 0.3;/* 这里这里 */
        transition: all 500ms;/* 这里这里 */
      }
    </style>
</head>
<body>
    <!-- 轮播 -->
<div id="ppt" class="carousel slide" data-bs-ride="carousel" data-bs-interval="1000">
   <!-- 轮播图片 -->
   <div class="carousel-inner">
     <div class="carousel-item active">
       <img src="top1.png" class="d-block" style="width:100%">
     </div>
     <div class="carousel-item">
       <img src="top2.png" class="d-block" style="width:100%">
     </div>
     <div class="carousel-item">
       <img src="top3.png" class="d-block" style="width:100%">
     </div>
     <div class="carousel-item">
        <img src="top4.png" class="d-block" style="width:100%">
      </div>
   </div>
   
   <!-- 左右切换按钮 -->
   <button class="carousel-control-prev" type="button" data-bs-target="#ppt" data-bs-slide="prev">
      <span class="carousel-control-prev-icon"></span>
   </button>
   <button class="carousel-control-next" type="button" data-bs-target="#ppt" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
   </button>
    <!-- 点 -->
   <div class="carousel-indicators">
    <li data-bs-target="#ppt" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#ppt" data-bs-slide-to="1"></li>
    <li data-bs-target="#ppt" data-bs-slide-to="2"></li>
    <li data-bs-target="#ppt" data-bs-slide-to="3"></li>
  </div>
 </div>
</body>
</html>

结束

JavaScript 方法我们可以通过自己的逻辑，去创建

bootstrap 方法我们可以通过给定的库，去快速的创建

两种方法都很简单，学过 html 的都会！