共计 2868 个字符,预计需要花费 8 分钟才能阅读完成。
start:须要引入 bootstrap 轮播插件 carousel.js 或者间接引入 bootstrap.min.js
基本原理:
第一步:设置图片轮播的容器。— 其余内容都须要搁置在这个容器里
采纳 carousel 款式,给这个容器一个 ID 值,不便前面采纳 data 属性触发。
<div id="demo" class="carousel"></div>
第二步:设置图片轮播计数器。
在容器 div.carousel 的外部增加图片轮播计时器,采纳 carousel-indicators 款式,个别用 ol 有序列表(有几张图片搁置几个 li),以白点的模式展现(具体款式在 bootstrap.css 文件第 5835 行起)
<div id="demo" class="carousel">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>
第三步:设置轮播图片播放区
最要害的区域,次要用来搁置须要轮播的图片,用 carousel-inner 款式管制,用 item 容器搁置每张轮播的图片。
<div id="demo" class="carousel">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner">
<div class="item">
![](img/indexLsit04.png)
</div>
<div class="item">
![]()
</div>
</div>
</div>
第四步:设置图片轮播控制器
个别图片轮播会有一个向前向后播放的控制器,在此,用 carousel-control 款式配合 left、right 来实现。
<div id="demo" class="carousel">
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol>
<div class="carousel-inner">
<div class="item">
![](img/indexLsit04.png)
</div>
<div class="item">
![]()
</div>
</div>
<a class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
demo:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
<!-- 解决兼容问题 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<!-- 搜索引擎 -->
<meta name="keywords" content="bootstrap,css,html">
<script src="js/jquery-3.1.0.min.js"></script>
<!-- jquery 在前边,bootstrap 依赖 jQuery-->
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="icon" href="favicon.icon">
<title></title>
<style>
#slidershow{
width: 300px;
height: 300px;
margin: 100px 400px;
}
img{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="slidershow" class="carousel slide"><!-- 图片轮播 的容器 -->
<!-- 设置图片轮播计数器 图片轮播的程序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
<li data-target="#slidershow" data-slide-to="3"></li>
<li data-target="#slidershow" data-slide-to="4"></li>
</ol>
<!-- 设置轮播图片播放区 -->
<div class="carousel-inner">
<div class="item active">
<a href="#">![](img/indexLsit01.png)</a>
</div>
<div class="item"><a href="#">![](img/indexLsit02.png)</a></div>
<div class="item"><a href="#">![](img/indexLsit03.png)</a></div>
<div class="item"><a href="#">![](img/indexLsit04.png)</a></div>
<div class="item"><a href="#">![](img/indexLsit05.png)</a></div>
</div>
<!-- 设置图片轮播控制器 -->
<a class="left carousel-control" href="#slidershow" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- 图片轮播 的容器 -->
</body>
</html>
呈现出的款式:
正文完
发表至: javascript
2021-04-01