三张名为li1 li2 li3 的照片 轮播 展示完整代码
时间: 2024-03-04 14:48:50 浏览: 26
好的,以下是一个基于Bootstrap框架的轮播展示三张图片的完整代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播展示图片</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引入jQuery和Bootstrap的JavaScript文件 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" 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">
<img src="li1.jpg" alt="li1">
</div>
<div class="item">
<img src="li2.jpg" alt="li2">
</div>
<div class="item">
<img src="li3.jpg" alt="li3">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
```
在这个代码中,我们首先引入了Bootstrap的样式和JavaScript文件,然后创建了一个id为"myCarousel"的div容器,用于包含整个轮播组件。在这个容器内部,我们分别创建了轮播指示器、轮播图片和左右切换按钮三个部分。轮播指示器用于显示当前轮播到哪一张图片,轮播图片则包含了三张名为li1、li2、li3的图片,左右切换按钮用于切换到上一张或下一张图片。最终通过调用Bootstrap提供的carousel()函数来初始化轮播组件。