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 src="img/indexLsit04.png">
</div>
<div class="item">
<img src="">
</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 src="img/indexLsit04.png">
</div>
<div class="item">
<img src="">
</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 src="img/indexLsit01.png" alt="First slide"></a>
</div>
<div class="item"><a href="#"><img src="img/indexLsit02.png" alt="2 slide"></a></div>
<div class="item"><a href="#"><img src="img/indexLsit03.png" alt="3 slide"></a></div>
<div class="item"><a href="#"><img src="img/indexLsit04.png" alt="4 slide"></a></div>
<div class="item"><a href="#"><img src="img/indexLsit05.png" alt="5 slide"></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>
呈现出的样式：
转载请注明原文地址: https://ju.6miu.com/read-679533.html
