bootstrap实现轮播图

最新推荐文章于 2024-03-19 00:52:43 发布

wjg1024

最新推荐文章于 2024-03-19 00:52:43 发布

阅读量817

点赞数 1

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_44981598/article/details/132901280

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body>
		<!--轮播插件就是将几张同等大小的大图，按照顺序依次播放-->
		
			<!--基本实例-->
			<div id="myCarousel" class="carousel slide" style="width: 400px;margin: 30px auto;">
			<!-- 图片下方导航圆圈 -->
				 <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>
					<li data-target="#myCarousel" data-slide-to="4"></li>
					<li data-target="#myCarousel" data-slide-to="5"></li>
				</ol> 
				<!-- 轮播图片 -->
				<div class="carousel-inner">
					<div class="item active">
						<img src="img/1.jpg" alt="第一张图片"/>
					</div>
					<div class="item">
						<img src="img/2.jpg" alt="第二张图片"/>
					</div>
					<div class="item">
						<img src="img/3.jpg" alt="第三张图片"/>
					</div>
					<div class="item">
						<img src="img/4.jpg" alt="第四张图片"/>
					</div>
					<div class="item">
						<img src="img/5.jpg" alt="第五张图片"/>
					</div>
					<div class="item">
						<img src="img/6.jpg" alt="第六张图片"/>
					</div>
				</div>
				<!-- 左导航键 -->
				<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a> 
				<!-- 右导航键 -->
				<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a> 
			</div>
			
			<script>
				$('#myCarousel').carousel({
					//设置自动播放/2 秒
					interval : 2000,
					//设置暂停按钮的事件
					pause : 'hover',
					//是否循环
					wrap : true,
				});
			</script>
			
	</body>