Bootstrap轮播图的使用和理解4
时间：2021-01-13 09:56:57|栏目：JavaScript代码|点击： 次
本文实例为大家分享了Bootstrap轮播图的实现代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 模板</title>
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
img {
width: 100%;
height: 100%;
}
p {
text-align: center;
}
</style>
</head>
<body>
<!-- 轮播图部分 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="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"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<!-- 包裹幻灯片 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/轮播1.png" alt="轮播图1">
<div class="carousel-caption">
轮播图1
</div>
</div>
<div class="item">
<img src="images/轮播2.png" alt="轮播图2">
<div class="carousel-caption">
轮播图2
</div>
</div>
<div class="item">
<img src="images/轮播3.png" alt="轮播图3">
<div class="carousel-caption">
轮播图3
</div>
</div>
<p>轮播图尝试</p>
</div>
<!-- Controls -->
<!-- 控制 -->
<!-- 向左滑动 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="false"></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>
<!-- js控制轮播图 -->
<button id="prev">向前</button>
<button id="next">向后</button>
<button id="pause">停止</button>
<button id="start">开始</button>
<button id="jump">到第二张</button>
<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 轮播图还支持js控制 -->
<script>
$(function(){
$('.carousel').carousel({
interval: 2000,//轮播间隔
pause:"hover", //鼠标悬停在轮播图上，是否停止滚动
wrap:true, //
keyboard:true //响应键盘事件
});
$("#prev").click(function(event) {
$('.carousel').carousel('prev')// 周期上一个项目。
});
$("#next").click(function(event) {
$('.carousel').carousel('next')// 周期到下一个项目。
});;
$("#pause").click(function(event) {
$('.carousel').carousel('pause')// 从通过项目循环停止传送带。
});;
$("#start").click(function(event) {
$('.carousel').carousel('cycle')// 通过传送带项目周期从左到右。
});;
$("#jump").click(function(event) {
$('.carousel').carousel(1)// 循环传送带到一个特定的帧（0为主，类似于数组）。
});;
});
</script>
</body>
</html>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
