Rumah >hujung hadapan web >tutorial js >bootstrap如何实现轮播图？bootstrap轮播图的实现方法介绍
bootstrap如何实现轮播图？bootstrap轮播图的实现方法介绍
- 不言asal
- 2018-10-19 10:23:254950semak imbas
轮播图在每个网站中都是不可或缺的，而且基本上都是在网站首页最显眼的地方，轮播图实现的方法也有很多，今天的这篇文章就给大家来介绍一下bootstrap轮播图的实现方法，有兴趣的朋友可以看一下。
首先我们来看一个插件：Bootstrap 轮播（Carousel）插件
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
所以说，bootstrap轮播图的实现我们需要利用Bootstrap 轮播（Carousel）插件，下面我们就来看一个具体的bootstrap轮播图实现的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap轮播图</title>
<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（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>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<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>说明：如果想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
本篇文章到这里就全部结束了，更多精彩可以关注php中文网bootstrap教程栏目！！！
Atas ialah kandungan terperinci bootstrap如何实现轮播图？bootstrap轮播图的实现方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js中什么是自定义react数据验证组件（详解）Artikel seterusnya：纯JS实现点击按钮返回页面顶部的代码