bootstrap：一个简单的轮播功能（轮播DEMO）

博风

已于 2023-12-10 18:00:05 修改

阅读量569

点赞数 6

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

于 2023-12-10 10:44:44 首次发布

本文链接：https://blog.csdn.net/Bof_jangle/article/details/134905196

版权

前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

bootstrap

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播demo</title>
<link rel="stylesheet" type="text/css" href="/cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css"  />
<style>
.carousel-indicators li{border-color:black;}
.carousel-indicators .active{background-color: black;}
.carousel-inner .item{text-align:center}
</style>
</head>
<body>
<div id="myCarousel" class="carousel" data-ride="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>
	<!-- 幻灯片 -->
	<div class="carousel-inner" role="listbox">
		<div class="item active" ><h1>Slide 1</h1></div>
		<div class="item"><h1>Slide 2</h1></div>
		<div class="item"><h1>Slide 3</h1></div>
	</div>
	<!-- 控件（上一个，下一个） -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	</a>
</div>

<!-- 基础的Jquery -->
<script type="text/javascript" src="/cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
<!-- 基础的bootstrap -->
<script type="text/javascript" src="/cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js" ></script>
<script type="text/javascript">
	$(function(){
		// 从左到右循环播放
		$("#myCarousel").carousel('cycle');
	});
</script>
</body>
</html>

bootstrap和jQuery下载地址：

https://download.csdn.net/download/Bof_jangle/88614214