bootstrap轮播图实现
bootstrap可以实现多种轮播样式
1.先来看一下完整的轮播（自动轮播，左右翻页，小圆点切换）
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.item img{
width:100%;
}
div#carousel-example-generic{
width:80%;
margin:0 auto;
}
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://how2j.cn/img/site/step/3491.png" >
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3492.png" >
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3493.png" >
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3494.png" >
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度，1000=1m，单位是毫秒
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">轮播自动播放速度设为1s轮播一次
3.左右翻页的控制
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>去掉这两个超链接则没有左右翻页功能
4.轮播标题内容(banner图里面的文本标题等)
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://how2j.cn/img/site/step/3491.png" >
<div class="carousel-caption">
轮播标题
</div>
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3492.png" >
<div class="carousel-caption">
轮播标题
</div>
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3493.png" >
<div class="carousel-caption">
轮播标题
</div>
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3494.png" >
<div class="carousel-caption">
轮播标题
</div>
</div>
</div>在轮播的item的子项中新增class为carousel-caption则会出现在banner图内的文本（注：这个类放在轮播图的下面）
5.基础轮播实现
<!DOCTYPE html>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
<style>
div.item img{
width:100%;
}
div#carousel-example-generic{
width:80%;
margin:0 auto;
}
</style>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://how2j.cn/img/site/step/3491.png" >
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3492.png" >
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3493.png" >
</div>
<div class="item">
<img src="http://how2j.cn/img/site/step/3494.png" >
</div>
</div>
</div>可以根据所需要的轮播样式自动去添加!
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-5-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读