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

2026/8/3 22:48:05 拓冰建站浏览量

<!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

建站实战干货

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