一、轮播
1.经典幻灯片效果
请注意轮播上的图像引用了 .d-block 、 .w-100两个样式，以修正浏览器预设的图像对齐带来的影响。
<div class="row">
<div class="col">
//slide动起来，carousel-fade渐变显示
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">//active才能默认显示
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
2.带控制功能的轮播图
<div class="row mt-5">
<div class="col">
<div class="carousel slide" data-ride="carousel" id="control">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#control" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>//href要与轮播盒子id对应才能控制
<a href="#control" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
3.指示器功能的轮播图
<div class="row mt-5">
<div class="col">
<div class="carousel slide" data-ride="carousel" id="indicators">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#indicators" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#indicators" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators">//data-target与id对应
<li data-target="#indicators" data-slide-to="0" class="active"></li>
<li data-target="#indicators" data-slide-to="1"></li>
<li data-target="#indicators" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
4.字幕的轮播图
在 .carousel-item 中使用 .carousel-caption 添加字幕到您的轮播控件中，如果是输小的浏览器viewport上，会自动隐藏（隐藏文字呈现主图片轮播），引用的是.d-none定义，一旦到了中型md浏览设备或屏幕则调用.d-md-block样式使之呈现。
<div class="row mt-5">
<div class="col">
<div class="carousel slide" data-ride="carousel" id="captions">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
<div class="carousel-caption text-danger">
<h5>这是第1张图</h5>
<p>这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
</div>
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
<div class="carousel-caption text-danger">
<h5>这是第2张图</h5>
<p>这是第2张图的说明这是第1张图的说明这是第2张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
</div>
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
<div class="carousel-caption text-danger">
<h5>这是第3张图</h5>
<p>这是第3张图的说明这是第3张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
</div>
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#captions" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#captions" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators">
<li data-target="#captions" data-slide-to="0" class="active"></li>
<li data-target="#captions" data-slide-to="1"></li>
<li data-target="#captions" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
5.设置轮播图的选项
- data-slide控制器，一般prev或者 next
data-slide-to将原始幻灯片索引传递到data-slide-to=“2”，将幻灯片位置转换到以0开始的特定索引- .carousel-fade属性，轮播盒，交替变化代替滑动
- data-interval，轮播盒，自动循环项目之间的延迟时间（即滚动时间），如果为false，则整个轮播组件不会自动滚动（仅支持手动滚动）
- data-keyboard，轮播盒，是否应对键盘事件作出反应，如果选择true则可以通过键盘上的左右方向键进行切换控制
- data-pause，如果设置为"hover", 则鼠标移在动画屏幕上暂停旋转，并在移开鼠标后恢复旋转事件（这是默认属性）；如设置为false,则鼠标移上去轮播动画不会暂停。在触摸屏幕上，当设置为"hover"属性时，循环将在触控时暂停（一旦用户完成与旋转事件的交互）两个时间间隔自动恢复。
6.data-ride，在用户手动循环第一个项目后自动播放传送带， 如果“carousel”则加载时自动播放传送带。- data-wrap，转盘是否应该连续循环或难以停止。
<div class="carousel slide" id="options" data-ride="carousel" data-interval='2000'
data-keyboard='true' data-pause='false' data-wrap='true'>
6.方法与事件
<div class="row mt-5">
<div class="col">
<div class="carousel slide" id="methods">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
......
</div>
<!-- 添加左右箭头 -->
<a href="javascript:;" class="carousel-control-prev prevBtn">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="javascript:;" class="carousel-control-next nextBtn">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators indicatorsBtn">
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>
<button class="btn btn-primary play">开始</button>//用来测试js的方法和事件
<button class="btn btn-primary pause">暂停</button>
</div>
</div>
<script>
//初始化以及开始播放
$('.play').click(function () {
$('#methods').carousel({
interval: 2000
});
$('#methods').carousel('cycle');
});
//暂停播放
$('.pause').click(function () {
$('#methods').carousel('pause');
});
//上一张功能
$('.prevBtn').click(function () {
$('#methods').carousel('prev');
});
//下一张功能
$('.nextBtn').click(function () {
$('#methods').carousel('next');
});
//指示器点击的功能
$('.indicatorsBtn li').each(function (index, element) {
$(element).click(function () {
$('#methods').carousel(index)
});
});
//两个事件
$('#methods').on('slide.bs.carousel', function (ev) { //开始切换的事件
console.log(
ev.direction, //当前走的方向
ev.relatedTarget, //当前走的哪一个图片（DOM）
ev.from, //当前走的图片的索引
ev.to, //要走到的图片的索引
);
console.log('开始走');
});
$('#methods').on('slid.bs.carousel', function () { //结束切换的事件
// do something…
console.log('走完了');
});
</script>
扫一扫
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
