Bootstrap 轮播插件

轮播插件详解

最新推荐文章于 2024-10-13 19:50:29 发布

weixin_33729196

最新推荐文章于 2024-10-13 19:50:29 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://blog.51cto.com/8818968/2117026

本文详细介绍了轮播插件的工作原理及其使用方法。通过具体的HTML示例代码，讲解了如何设置图片轮播、控制轮播速度及播放状态等。同时，还介绍了如何利用JavaScript进行配置及事件监听。

一．轮播
轮播插件就是将几张同等大小的大图，按照顺序依次播放。
//基本实例。
<div id="myCarousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.png" alt="第一张">
</div>
<div class="item">
<img src="img/slide2.png" alt="第二张">
</div>
<div class="item">
<img src="img/slide3.png" alt="第三张">
</div>
</div>

<a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
</div>

data 属性解释：
1.data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置； 2.data-slide-to 来向轮播底部创建一个原始滑动索引，data-slide-to="2"将把滑
动块移动到一个特定的索引，索引从 0 开始计数。
3.data-ride="carousel"属性用户标记轮播在页面加载时开始动画播放。

轮播插件有三个自定义属性：

Bootstrap 轮播插件

如果在 JavaScript 调用就直接使用键值对方法，并去掉 data-；
//设置自定义属性
$('#myCarousel').carousel({
//设置自动播放/2 秒
interval : 2000,
//设置暂停按钮的事件pause : 'hover',
//只播一次wrap : false,
});

轮播插件还提供了一些方法，如下：

Bootstrap 轮播插件

//点击按钮执行
$('button').on('click', function () {
//点击后，自动播放
$('#myCarousel').carousel('cycle');
//其他雷同
}

Bootstrap 轮播插件

//事件
$('#myCarousel').on('slide.bs.carousel', function () {
alert('当调用 slide 实例方式时立即触发');
});

$('#myCarousel').on('slid.bs.carousel', function () {
alert('当轮播完成一个幻灯片触发');
});

转载于:https://blog.51cto.com/8818968/2117026