菜单 搜索
首页 前端知识 学过html都会的html轮播图

学过html都会的html轮播图

2024-01-24 15:01:00 前端知识 前端哥 464 412 我要收藏

html轮播图

  • 开篇(唠嗑)
  • 轮播图Javascript方法
    • 1.先创建 div 去容纳要放进去的内容
    • 2.写css修饰
      • 1)先将 ppt 的整体设置好 [ #ppt ]
        • ppt 整体的代码为
      • 2) 按钮的css[ .il 和 .ir ]
        • 整体的按钮代码(左右按钮只是将 left 改成 right )
      • 3)装点的 div[ #ppt_dot ]
        • 整体代码如下
      • 4)每个点的css[ #pd1 #pd2 #pd3 #pd4 ]
        • 整体代码如下
    • 3.写JavaScript让图片动起来
      • 1)改变图片
        • 整体代码
      • 2)改变点的颜色
        • 最后代码拼接起来，整体如下
      • 3)向左向右切换图片
        • 整体代码如下
      • 4)开始轮播图片
        • 整体代码
      • 5)停止轮播图片
        • 整体代码
      • 6)点击对应点切换对应图片
        • 整体代码
    • javascript篇结束
      • 整体代码
  • 轮播图bootstrap方法
    • 准备说明
    • 1.引入 bootstrap 的两个文件
      • 整体代码
    • 2.创个 div 装轮播图
    • 3.轮播图的设置
      • 整体代码如下
    • 4.设置下栏的小横杠[即为JavaScript版的点]
      • 整体代码如下
    • 5.左右切换按钮
      • 整体代码如下
    • bootstrap篇结束
      • 完整代码
  • 结束

开篇(唠嗑)

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

轮播图Javascript方法

预览
展示

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

展示1

准备说明

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.qianduange.cn//article/158.html
标签
htmlcsscss3bootstrap
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

印度电影《凶心人在宝莱坞》的主要内容

2024-02-03 01:02:03

印度电影《未知死亡》的主要内容

2024-02-03 01:02:48

未知死亡的详细内容

2024-02-03 01:02:58

丝绸之路与洛阳的5个交汇处

2024-02-03 01:02:32

JSON文件中的数据渲染到页面（jquery）

2024-02-02 09:02:26

js/jquery之input 复选框checkbox、单选按钮radio选中判断

2024-02-02 09:02:26

jQuery实现3D轮播图

2024-02-02 09:02:25

jquery中ajax总结

2024-02-02 09:02:25

jQuery的toggle方法使用指南

2024-02-02 09:02:25

解决jQuery跨域问题的方法

2024-02-02 09:02:24

大家推荐的文章
1

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
2

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
3

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
4

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
5

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
6

Get请求报错404出现原因及解决办法

2024-01-25 10:01:26993
7

vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题

2024-01-27 01:01:35992
8

jQuery实现AJAX和AJAX跨域问题

2024-01-28 12:01:54988
9

echarts - 自定义形状 - 实现立体柱状图

2024-01-30 10:01:46987
10

前端大屏适配几种方案

2024-01-29 13:01:44987

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！