bootstrap轮播图

最新推荐文章于 2025-05-16 12:58:59 发布

Grit_ICPC

最新推荐文章于 2025-05-16 12:58:59 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/JS 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/Grit_ICPC/article/details/72638474

HTML/CSS/JS 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<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">
			<img src="img/1.jpg" alt="First slide">
		</div>
		<div class="item">
			<img src="img/2.jpg" alt="Second slide">
		</div>
		<div class="item">
			<img src="img/3.jpg" alt="Third slide">
		</div>
	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="carousel-control left" href="#myCarousel" 
	   data-slide="prev">‹</a>
	<a class="carousel-control right" href="#myCarousel" 
	   data-slide="next">›</a>
</div> 
<script	type="text/javascript">
	$('#myCarousel').carousel({
		interval:1000
	});
</script>
</body>
</html>