BootStrap轮播图 (自动轮播)

时间:2024-03-15 20:54:29

下面的轮播图已经有了鼠标悬停停止轮播,左右导航,和下方圆点计数器、给图片添加标题,内容等功能
BootStrap轮播图 (自动轮播)

<!--轮播图-->
				<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>

下面介绍几种自动轮播的设置方法,在别的大神上找了很多,我觉得最好用的。

  1. 默认使用Bootstrap的Carousel组件,只需要加上 data-ride=“carousel” 就可以实现自动播放了。无需使用初始 化的js函数<div class="carousel slide" id="slidershow" data-ride="carousel" data-interval="2000">
  2. 使用jQuery`$(’#slidershow’).carousel({
    interval: 2000 // in milliseconds
    })