1. Toy模板网首页
  2. > Toy博客

学过html都会的html轮播图

8月前 作者：java狗都不学！ 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了学过html都会的html轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

开篇(唠嗑)

为什么说学过html都会?
因为我也刚学没多久，所运用的知识都是基础
两种方法创建出简单的轮播图
1.通过 javascript 去解决图片轮播
网页预览[github可能图片加载的有点慢]
html轮播图,html,css,css3,bootstrap
2.通过引用 bootstrap 去创建轮播图
网页预览[github可能图片加载的有点慢]
html轮播图,html,css,css3,bootstrap

轮播图Javascript方法

预览
html轮播图,html,css,css3,bootstrap

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

！id 随意，但不能重复！

	<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 ]

	position: absolute;
    width: 100%;
    height:600px;

将图片设为背景

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

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

	background-repeat: no-repeat;

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

	background-size: 100% auto;
    background-position: -50% 50%;
ppt 整体的代码为
	#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 ]

调整按钮大小

	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;
	
	/* 鼠标放在按钮上改变透明度 */
	.ir:hover{
    	opacity: 0.8;
	}
整体的按钮代码(左右按钮只是将 left 改成 right )
	.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 ]

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

	position: absolute;
    width:200px;
    height:30px;

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

	background: none;
    bottom:0px;

居中 div

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

flex 布局使点在同一条线上

	display: flex;
整体代码如下
#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 ]

设置点大小

	width:10px;
    height: 10px;

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

	background:rgb(34, 34, 34);

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

	position: relative;
    margin-top: 10px;

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

	margin-left: 25px;

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

	border-radius: 5px;

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

	opacity: 0.8;
整体代码如下
#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

var img = 1;

1)改变图片

先创建个方法，让图片能变成其他的图片
先用个变量获取 id

	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是文件名+序号

	a.style.backgroundImage="url(./top/top"+img+".png)";
整体代码
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

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

通过 switch 来判断 img
记得在定义方法时引入变量

switch(img){
	case 1:
		break;
	case 2:
		break;
	case 3:
		break;
	case 4:
		break;
}

最后在每个对应的变量，去设置点的颜色
通过 变量.style.backgroundColor=“颜色”;
去改变 css 中的 background-Color 属性

	a.style.backgroundColor="颜色";
    b.style.backgroundColor="颜色";
    c.style.backgroundColor="颜色";
    d.style.backgroundColor="颜色";
最后代码拼接起来，整体如下
// 改变点的颜色
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

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

但是不能一直减下去
通过 if 去判断，并将 变量img 设置成 开头或结尾

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

把改变图片的方法和改变点的方法放到最后
能使图片变换时不会切换到图片序号为 0 或 5 的图片

	change_img();
    change_dot(img);

然后我们需要将方法跟按钮绑定
用 onclick = “方法” 绑定

	<div class="il" onclick="ppt_left()">&lt;-</div>
    <div class="ir" onclick="ppt_right()">-&gt;</div>
整体代码如下

js

// 向左切换图片
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

	<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 (函数,延迟);

我想让他向左轮播
那就用我们刚刚定义的 向左改变图片 的方法去 改变图片:

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

我想让他向右轮播
那就用我们刚刚定义的 向右改变图片 的方法去 改变图片:

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

为了让网页一打开，图片就开始轮播，那就需要再 js 最顶部，
加入 window.onloadstart = 方法名 ;
最好时在 img变量 的下面
这样网页一打开，就会运行 开始轮播方法

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

5)停止轮播图片

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

	clearInterval(ppt_time);

当我们想自己切换图片，但又不想在切换时自动轮播图片，
我们就可以在 div 中加入 οnmοuseοver=”方法名“ 的属性，
使得鼠标放在 div 上时，运行 停止轮播 方法

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

当我们看完想看的图片后，将鼠标移走想让其继续轮播图片时
用 onmouseleave="方法名" 属性，让鼠标移离 div 时，继续轮播

	<div id="ppt" onmouseover="ppt_stop()" onmouseleave="ppt_start()"></div>
整体代码

js

// 停止函数
function ppt_stop(){
    clearInterval(ppt_time);
}

html

	<!-- 按钮 -->
    <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 设置成对应点的 点

	img = 1;

然后再改变图片

    change_img();
    change_dot(img);

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

<!--     id             方法函数名    -->
<div id="pd1" onclick="click_dot1()"></div>
整体代码

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

//每个点的被点击切换对应图片
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

<!-- 按钮 -->
    <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

<!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

#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

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方法

html轮播图,html,css,css3,bootstrap

准备说明

bootstrap 可以说是 html 的一个库，通过 bootstrap 我们可以通过给的模板，直接创建一个轮播图组件
我们得先将 bootstrap库 给下载下来
去下载====> 官网 <====去下载
打不开官网的话，点 这里
但是尽量在官网下，迫不得已再点 这里
我们制作的轮播图，仅仅只是用到了库里的 bootstrap.css 和 bootstrap.js 文件
我们通过创建 html 来引入这两货，就能简单的制作出轮播图
接下来，一步一步，教你创建轮播图，其实你可以跳转到最后，直接抄模板

1.引入 bootstrap 的两个文件

在 head 中，引入两个库

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

整体代码

<!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 为单位

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

3.轮播图的设置

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

	<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

	<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%

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

整体代码如下

<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

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

2)在此类里，用 li 或者 button 创建出按钮 [这里我用 li ]
3)将每个按钮都增加上 data-bs-target 属性，属性设置为轮播图组件的 id，记得 #
4)将每个按钮都增加上 data-bs-slide-to 属性，属性设置为轮播图序号，以 0 开头
5)将第一个，或者你想让哪张图片先展示，就添加 class 为 active 的类

	<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 里

	<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 下，创建两个按钮

	<button></button>
   	<button></button>

2)两个按钮的 class 分别为 carousel-control-prev 和 carousel-control-next
===================[看英文都知道 prev 之前，即往左 next 下一个，即向右]

	<button class="carousel-control-prev"></button>
   	<button class="carousel-control-next"></button>
  1. 属性 type 都为 button ， 属性 data-bs-target 都为 #ppt 
	<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
-------------------------------------------------向左----向右

	<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 属性，去引入图标
这是内置的左图标

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

这是内置的右图标

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

你也可以自定义图标，可以自己通过 css 去自定义按钮的大小[默认的按钮很大]
这些都是可以自定义样式的，包括下面的 小横杠[点]

整体代码如下

	<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库 ，可以让我们更快，更方便的创建一个轮播图组件，提升效率，而且还可以自定义

完整代码

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

<!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 的都会！文章来源地址https://www.toymoban.com/news/detail-772009.html

到了这里，关于学过html都会的html轮播图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Html+CSS+JS轮播图：手动轮播，自动轮播

    Html+CSS+JS轮播图：手动轮播，自动轮播

    2024年02月07日
    浏览(34)
  • 使用html+css+jquery实现3D轮播图

    使用html+css+jquery实现3D轮播图

    还是先来看看效果图：  通过效果图我们先理一下思路： 首先就是需要几张图片，但只有一张是显示在我们眼前的 第二步：把一张图片分成几等份，这样点击转换的时候就会分开转 第三步：就是实现点击按钮切换下一张。 HTML部分首先我们需要一个盒子显示图片，然后在盒

    2024年02月08日
    浏览(43)
  • HTML+CSS+JavaScript：轮播图自动播放

    HTML+CSS+JavaScript：轮播图自动播放

    轮播图如下图所示，需求是每隔一秒轮播图自动切换一次   以下是缺失JS部分的代码，感兴趣的小伙伴可以先自己试着写一写 1、将代码素材在浏览器中打开，并按F12进入开发者模式，分析各个HTML标签在轮播图中的位置及作用 2、获取相关元素 3、利用间歇函数实现一秒切换一

    2024年02月14日
    浏览(33)
  • 网页轮播图制作（html+css+js）

    网页轮播图制作（html+css+js）

            目的：用于自己做记录，记录制作的过程以及遇到的一些问题。内容参考来自b站的up主：黑马前端 的pink老师JavaScript基础语法课程。 （1）当鼠标经过轮播图，左右两边的按钮出现，离开则隐藏按钮； （2）点击左侧按钮，图片向右播放一张，以此类推，右侧同理；

    2024年02月08日
    浏览(37)
  • HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

    HTML+CSS+JavaScript：轮播图的自动播放、手动播放、鼠标悬停暂停播放

    昨天我们做了轮播图的自动播放，即每隔一秒自动切换一次 今天我们增加两个需求： 1、鼠标点击向右按钮，轮播图往后切换一次；鼠标点击向左按钮，轮播图往前切换一次 2、鼠标悬停在轮播图区域中时，轮播图暂停播放   以下是缺失JS部分的代码，感兴趣的小伙伴可以先

    2024年02月14日
    浏览(37)

  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-5 CSS3 动画

    上述代码中： 第10行代码定义animation属性实现动画效果； 第10~17行代码定义rotate动画让图片从0%到100%顺时针旋转360度； 第18~20行代码通过animation动画实现当鼠标指针悬停在图片上时让图片不停的旋转。 CSS3 动画 CSS3可以创建动画，它可以取代许多网页动画图像、Flash动画和Ja

    2024年02月02日
    浏览(30)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3过渡

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-1 CSS3过渡

    上述代码中： 第8-16行代码定义.box的样式，设置透明度为1，transition的值为3s； 第18~20行代码定义元素的透明度为0，表示当鼠标指针悬停在.box元素上时元素隐藏，当鼠标离开盒子时元素显示。 在CSS3之前，由于没有过渡属性transition，当修饰CSS样式时，CSS样式属性值就会瞬间变

    2024年01月21日
    浏览(41)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-3 CSS3 旋转缩放

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-3 CSS3 旋转缩放

    上述代码中： 第13行代码改变了div盒子变形原点 默认旋转 修改变形原点为左下角（transform-origin: left bottom 0px;） 元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置就是元素的中心位置。CSS3变形使用transform-origin属性指定元素变形基于的原点。

    2024年01月16日
    浏览(42)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外，中间的区域（主体区域）划分成了三个栏目，分别是左侧边栏、内容区域和右侧边栏，这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时，页面中左侧边栏和右侧边栏的宽度固定不变，而内容区域的

    2024年01月17日
    浏览(54)
  • 响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-4 CSS 立方体

    响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例3-4 CSS 立方体

    上述代码中： 第8~17行代码定义了3D环境容器，设置transform-style:的值为preserve-3d（设置3D环境）； 第13行代码设置perspective:的值为1000px（元素距视图的距离为1000px）; 第11行代码设置position的值为relative（相对定位）； 第16行代码的作用是设置3D容器的位移和旋转角度； 第23~28行代

    2024年02月01日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包