您的位置：首页 > Web前端 > BootStrap

使用Bootstrap编写一个简单的网页轮播图效果

2017-08-21 21:51 507 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导入bootstrap.css文件 必需！-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<!--导入jquery.js和bootstrap.js 必需！-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--
3个外部导入文件下载地址可直接到jQuery的官网和Bootstrap官网下载到最新免费版 http://jquery.com/ http://getbootstrap.com/2.3.2/
-->
</head>
<body>
<h1>图片轮播效果</h1>
<!--
data-interval默认值是5000,单位是毫秒,即每张图片切换所需时间
data-ride="carousel" 设置为自动播放
-->
<div id="imgs" data-interval="2000" data-ride="carousel" class="carousel slide" style="width: 791px;">
<div class="carousel-inner">
<!--
下面开始存放需要展现的图片,第一张需要多加 active类型名称
-->
<div class="item active">
<a href="#"><img src="images/f1.jpg"/></a>
</div>
<div class="item">
<a href="#"><img src="images/f2.jpg"/></a>
</div>
<div class="item">
<a href="#"><img src="images/f3.jpg"/></a>
</div>
<div class="item">
<a href="#"><img src="images/f4.jpg"/></a>
</div>
<div class="item">
<a href="#"><img src="images/f5.jpg"/></a>
</div>

<!--
设置跳转小圆点
-->
<ul class="carousel-indicators">
<li data-target="#imgs" data-slide-to="0" class="active"></li>
<li data-target="#imgs" data-slide-to="1"></li>
<li data-target="#imgs" data-slide-to="2"></li>
<li data-target="#imgs" data-slide-to="3"></li>
<li data-target="#imgs" data-slide-to="4"></li>
</ul>

<a id="toLeft" href="#imgs" data-slide="prev" class="carousel-control left"></a>
<a id="toRight" href="#imgs" data-slide="next" class="carousel-control right"></a>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航