BootStrap实现轮播图的自动播放和设置播放间隔时间

最新推荐文章于 2025-05-13 10:21:04 发布

江西师范大学-20届-吴悠

最新推荐文章于 2025-05-13 10:21:04 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_39905917/article/details/85091136

前端开发专栏收录该内容

21 篇文章

订阅专栏

本文介绍了如何使用BootStrap实现轮播图的自动播放功能，并详细讲解了如何设置播放间隔时间。通过设置`data-ride="carousel"`实现自动播放，以及使用`data-interval="2000"`设定间隔为2000毫秒的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

BootStrap实现轮播图的自动播放和设置播放间隔时间

参考链接：https://blog.youkuaiyun.com/rui512777/article/details/52670173?utm_source=blogxgwz5
轮播图代码如下：

<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 820px; position: relative;">
	<h2 id="shouye">首页</h2>
		<!--轮播区域-->
			<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
			<!--轮播指标-->
			<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>
				<li data-target="#myCarousel" data-slide-to="3" ></li>
			</ol>
			<!--轮播指标-->
			<!--轮播项目-->
				<div class="carousel-inner" style="height: 750px;">
					<div class="item active" >
						<img src="img/00.jpg" alt="First slide" >
						<div class="carousel-caption">书店</div>
					</div>
					<div class="item">
						<img src="img/01.jpg" alt="First slide" >
						<div class="carousel-caption">书店</div>
					</div>
					<div class="item">
						<img src="img/2.jpg" alt="First slide"  >
						<div class="carousel-caption">书店</div>
					</div>
					<div class="item">
						<img src="img/3.jpg" alt="First slide" >
						<div class="carousel-caption">书店</div>
					</div>
					</div>
					<!--轮播控制器-->
					<a class="carousel-control left" href="#myCarousel" data-slide="prev">
						<span class="glyphicon glyphicon-chevron-left"></span>
					</a>
					<a class="carousel-control right" href="#myCarousel" data-slide="next">
						<span class="glyphicon glyphicon-chevron-right"></span>
					</a>
					<!--轮播控制器-->
			  </div>
</div>

设置自动播放：data-ride=“carousel”
设置播放的时间间隔（这里设置的时间间隔是2000毫秒）：data-interval=“2000”