如何使用bootstrap实现轮播图？
【摘要】 大家好，我是雄雄，今天给大家分享的是如何使用bootstrap实现轮播图，美观大方且兼容性还好！轮播图就不做过多的介绍了，大家都知道，只是轮播的实现有多种方式，例如使用纯js写，费时费力，且还不适用于各种终端设备，但是bootstrap就不一样了，只需写一套代码，无论是手机端还是ipad端，再或者是PC端，都可以正常使用。那么接下来我们就来看看bootstrap是如何实现轮播图的。步骤：准备...
大家好，我是雄雄，今天给大家分享的是如何使用bootstrap实现轮播图，美观大方且兼容性还好！
轮播图就不做过多的介绍了，大家都知道，只是轮播的实现有多种方式，例如使用纯js写，费时费力，且还不适用于各种终端设备，但是bootstrap就不一样了，只需写一套代码，无论是手机端还是ipad端，再或者是PC端，都可以正常使用。
那么接下来我们就来看看bootstrap是如何实现轮播图的。
步骤：
- 准备轮播需要的图片，大于等于两张。
- 准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。
- 将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片)的文件夹内。
- 在html中写代码，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="myCarousel" class="carousel" data-ride="carousel">
<!--图片的容器-->
<div class="carousel-inner">
<div class="item active">
<a href="index.html"><img src="image/ylimg1.jpg" /></a>
<div class="carousel-caption">
<h3>这是第一张图片</h3>
</div>
</div>
<div class="item">
<img src="image/ylimg2.jpg" />
<div class="carousel-caption">
<h3>这是第二张图片</h3>
</div>
</div>
</div>
<!--圆圈指示符-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!--左右的按钮-->
<a href="#myCarousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#myCarousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
运行结果如下所示：
编辑
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）