2020-2-27今日总结——轮播台
作者：互联网
Bootstrapd的使用
1.轮播图 类名class="carousel"
carousel-inner，专门放随着页面滚动而滚动的内容。
div class="carousel" data-ride="carousel"，就是用来启动Bs轮播台。
<div class="carousel slide" data-ride="carousel" data-interval="2500" data-pause="none">
data-interval="2500" ，2.5s一张图进行轮播。
data-pause="none"，不暂停一直播放。（设置为click，一点击就会停）
<div class="item">
<img src="img/33.jpg">
<div class="carousel-caption">
<h5>五名有名-3</h5>
<span>Lorem ipsum dolor sit amet elit.</span>
</div>
</div>
carousel-caption，轮播广告的标题字，绝对定位，居中考下显示。
<!--不随广告而滚动的内容：轮播控件-->
<a data-slide="prev" class="carousel-control left" href="#ad5">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" class="carousel-control right" href="#ad5">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
因为按钮不随图片滚动，所以就不要放在carousel-inner中。
故而独立放在carousel slide中。
通过，a标签中的href="#ad5"来捆绑区域，否则Bs也不知道要控制哪个轮播区域。
<span class="glyphicon glyphicon-chevron-left">，用图标字体显示上一张“<”。
<span class="glyphicon glyphicon-chevron-right">，用图标字体显示下一张“>”。
单独这两个图标样式： <ignore_js_op>
，有点小丑～
通过在<a class="carousel-control left（right）">，来修改样式：
<!--不随广告而滚动的内容：序号指示器-->
<ul class="carousel-indicators">
<li data-target="#ad6" data-slide-to="0" class="active"></li>
<li data-target="#ad6" data-slide-to="1"></li>
<li data-target="#ad6" data-slide-to="2"></li>
<li data-target="#ad6" data-slide-to="3"></li>
</ul>
carousel-indicators，用来设置一个一个直观“捆绑点”，单击即可切换，随着轮播滚动而滚动。
data-target="#ad5"，设置捆绑id，这样才能将捆绑点和轮播图片连接上。
data-slide-to，拓展属性来捆绑图像顺序，这样鼠标单击才能切换。
总代码：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta neme="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LunboTai</title>
<link rel="stylesheet" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div id="ad5" class="carousel slide" data-ride="carousel" data-interval="3000" >
<!--轮播广告的内部内容-->
<div class="carousel-inner">
<div class="item active">
<img src="img/11.jpg">
<div class="carousel-caption">
<h5>避暑蓝天</h5>
<span>lorem ipsum dolor sit amer elit.</span>
</div>
</div>
<div class="item">
<img src="img/22.jpg">
<div class="carousel-caption">
<h5>海内存知己-2</h5>
<span>Lorem ipsum dolor sit amet elit.</span>
</div>
</div>
<div class="item">
<img src="img/33.jpg">
<div class="carousel-caption">
<h5>五名有名-3</h5>
<span>Lorem ipsum dolor sit amet elit.</span>
</div>
</div>
<div class="item">
<img src="img/44.jpg">
<div class="carousel-caption">
<h5>少言多思-4</h5>
<span>Lorem ipsum dolor sit amet elit.</span>
</div>
</div>
</div>
<!--不随广告而滚动的内容，轮播控件-->
<a data-slide="prev" class="carousel-control left" href="#ad5">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a data-slide="next" class="carousel-control right" href="#ad5">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!--不随广告而滚动的内容:序号指示器-->
<ul class="carousel-indicators">
<li data-target="#ad5" data-slide-to="0" class="active"></li>
<li data-target="#ad5" data-slide-to="1" ></li>
<li data-target="#ad5" data-slide-to="2" ></li>
<li data-target="#ad5" data-slide-to="3" ></li>
</ul>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
标签：ipsum,27,轮播,sit,elit,2020,carousel,data 来源： https://www.cnblogs.com/joker-18/p/12372945.html