Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。内容是足够灵活的，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/
popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.carousel-inner img {
width: 100%;
height:auto;
z-index: 1;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
</style>
</head>
<body>
<!--轮播图-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul 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>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="">
</div>
<div class="carousel-item">
<img src="">
</div>
<div class="carousel-item">
<img src="">
</div>
<div class="carousel-item">
<img src="">
</div>
<div class="carousel-item">
<img src="">
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script>
$('.carousel').carousel({
interval: 2000,
pause: null,
wrap:true
}) //自动轮播
$(function(){
// 初始化轮播
$(".start-slide").click(function(){
$("#myCarousel").carousel('cycle');
});
// 停止轮播
$(".pause-slide").click(function(){
$("#myCarousel").carousel('pause');
});
// 循环轮播到上一个项目
$(".prev-slide").click(function(){
$("#myCarousel").carousel('prev');
});
// 循环轮播到下一个项目
$(".next-slide").click(function(){
$("#myCarousel").carousel('next');
});
// 循环轮播到某个特定的帧
$(".slide-one").click(function(){
$("#myCarousel").carousel(0);
});
$(".slide-two").click(function(){
$("#myCarousel").carousel(1);
});
$(".slide-three").click(function(){
$("#myCarousel").carousel(2);
});
});
</script>
</body>
</html>
效果图
一、通过用data属性
使用data属性可以很容易控制轮播的位置。
1、属性data-slide接受关键字pre或next，来改变轮播图相对于当前位置的位置。
2、使用data-slide-to来向轮播传递一个原始滑动索引，data-slide-to=”2″将把滑块移动到一个特定的索引，索引从0开计数。
3、data-ride=”carousel”属性用于标记轮播在页面加载时就开始动画播放了。
二、通过JavaScript来加以修饰轮播效果
轮播可以通过JavaScript手动调节
下面是一些通过data属性或JavaScript来传递的选项
| 选项名称 | 类型/默认值 | data属性名称 | 描述 |
| interval |
number 默认值：5000 |
data-interval | 自动循环每个项目之间延迟的的时间量。如果为false,轮播将不会自动循环。 |
| pause |
string 默认值：”hover” |
data-pause | 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 |
| wrap |
boolean 默认值：true |
data-wrap | 轮播是否连续循环。 |
下面是一些轮播插件中的有用方法：
| 方法 | 描述 | 实例 |
| .carousel(options) | 初始化轮播为可选的options对象，并开始循环项目。 |
$('#identifier').carousel({
interval: 1000
})
|
| .carousel(‘cycle’) | 从左到右循环轮播项目。 |
$('#identifier').carousel('cycle')
|
| .carousel(‘pause’) | 停止轮播项目。 |
$('#identifier').carousel('pause')
|
| .carousel(number) | 循环轮播到某个特定的帧（从0开始计数，与数组类似）。 |
$('#identifier').carousel(number)
|
| .carousel(‘prev’) | 循环轮播到上一个项目。 |
$('#identifier').carousel('prev')
|
| .carousel(‘next’) | 循环轮播到下一个项目。 |
$('#identifier').carousel('next')
|
版权声明：本文为qq_58460470原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。