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

2023-12-14 03:17:45
<!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

文章来源:https://blog.csdn.net/Bof_jangle/article/details/134905196
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。