分针网
BootStrap轮播入门学习
温富杰 2017-07-06 09:14:39
阅读 10 点赞   阅读 写了79文章
前端开发

一般模式

1首先要设置一个轮播图片的容器,记得设上id。

<div id="myCarousel" class="carousel slide"></div>

2.设计轮播图片计数器。
也就是轮播下面的这个小点


三个点分别对应123.用data-slide-to参数进行控制。
data-targe参数照抄,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。

<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

3.设计图片轮播区,这个区域用来放置图片。
把图片放置在class="carousel-inner"的div区域中。
然后每个图片放在class="item"的div区域。

<div class="carousel-inner">
<div class="item active">
![](1.jpg)
</div>
<div class="item">
![](2.jpg)
</div>
<div class="item">
![](3.jpg)
</div>
</div>

最终

<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
![](1.jpg)
</div>
<div class="item">
![](2.jpg)
</div>
<div class="item">
![](3.jpg)
</div>
</div>
</div>

设置轮播标题

这个如果需要,也可以设置,如图


<div class="item">
![](2.jpg)
<div class="carousel-caption">标题 2</div>
</div>

设置轮播导航

什么是导航?


如下

<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;</a>

设置轮播自动播放

此时需要jquery出售了。interval: 设置自动播放间隔时间

<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 30
})
});
</script>

综上

<div id="myCarousel" class="carousel slide" data-interval="2">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
![](1.jpg)
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
![](2.jpg)
<div class="carousel-caption">标题 2</div>
</div>
<div class="item">
![](3.jpg)
<div class="carousel-caption">标题 3</div>
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;</a>
</div>
<script>
$(document).ready(function() {
$('.carousel').carousel({
interval: 30
})
});
</script>




©著作权归作者所有
18650135259
客服微信