<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../bootstrap-v3/css/bootstrap.css">
<!-- <link rel="stylesheet" href="../css/index.css"> -->
<style>
img{
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">轮播图</h1>
<div class="bs-example" data-example-id="simple-carousel">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- carousel-indicators 轮播指示器-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
<li data-target="#carousel-example-generic" data-slide-to="3" class=""></li>
</ol>
<!--carousel-inner 内部轮播-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!--data-holder-rendered="true"-->
<img alt="First slide [900x500]" src="../../04_jQuery/images/1.jpg">
</div>
<div class="item">
<img alt="Second slide [900x500]" src="../../04_jQuery/images/2.jpg">
</div>
<div class="item">
<img alt="" src="../../04_jQuery/images/3.jpg">
</div>
<div class="item">
<img alt="" src="../../04_jQuery/images/4.jpg">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<script type="text/javascript" src="../jquery-3.2.1.js"></script>
<script type="text/javascript" src="../bootstrap-v3/js/bootstrap.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
上述运行结果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
