下面的轮播图已经有了鼠标悬停停止轮播,左右导航,和下方圆点计数器、给图片添加标题,内容等功能
<!--轮播图-->
<div class="container" >
<div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="2000">
<!--计数器-->
<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>
</ol>
<!--图片容器-->
<div class="carousel-inner">
<div class="item active">
<img src="assets/ogMs_banner.jpg"/>
<!--添加对应标题和内容-->
<div class="carousel-caption">
<h4>图一</h4>
<span>内容</span>
</div>
</div>
<div class="item">
<img src="assets/ogMs_banner.jpg"/>
<!--添加对应标题和内容-->
<div class="carousel-caption">
<h4>图二</h4>
</div>
</div>
<div class="item">
<img src="assets/ogMs_banner.jpg"/>
<!--添加对应标题和内容-->
<div class="carousel-caption">
<h4>图三</h4>
</div>
</div>
<!--轮播导航-->
<a href="#slidershow" data-slide="prev" class="left carousel-control" role="button">
<img src="assets/left1.png"/>
</a>
<a href="#slidershow" data-slide="next" class="right carousel-control" role="button">
<img src="assets/right.png"/>
</a>
</div>
</div>
</div>
下面介绍几种自动轮播的设置方法,在别的大神上找了很多,我觉得最好用的。
- 默认使用Bootstrap的Carousel组件,只需要加上 data-ride=“carousel” 就可以实现自动播放了。无需使用初始 化的js函数
<div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="2000">
- 使用jQuery`$(’#slidershow’).carousel({
interval: 2000 // in milliseconds
})