jQuery响应式内容滑动插件bxSlider
bxSlider 是一款免费的 jQuery Slider 的插件,它可以实现 内容和图片幻灯片滚动效果,支持响应式,桌面和手机等各种设备都能完美适应。
bxSlider特性
- 完全响应 - 将适应任何设备
- 水平,垂直和渐变模式
- 幻灯片可以包含图片,视频或HTML内容
- 内置高级触摸/滑动支持
- 对幻灯片动画使用CSS转换(本机硬件加速!)
- 完全回调API和公共方法
- 插件体积非常小,但是包含完整的主题,,实现简单
- 浏览器支持:Firefox,Chrome,Safari,iOS,Android,IE7 +
如何使用 bxSlider
引入核心文件
首先是加载jQuery库,以及bxSlider插件文件和相关CSS文件,您可以从官方网站下载最新版本的bxSlider
<script src="/js/jquery.min.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <link href="/lib/jquery.bxslider.css" rel="stylesheet" />
创建HTML标记
创建一个<ul class="bxslider">元素,<li>每个幻灯片使用一个。幻灯片可以包含图片,视频或任何其他HTML内容!
<ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/pic2.jpg" /></li> <li><img src="/images/pic3.jpg" /></li> <li><img src="/images/pic4.jpg" /></li> </ul>
调用bxSlider
调用bxSlider插件,当页面内容加载完时调用bxSlider。
$(document).ready(function(){ $('.bxslider').bxSlider(); });
bxSlider选项设置
bxSlider提供了丰富的选项可配置,以下我们列出最主要也是最常用的选项设置。
参数 | 描述 | 默认值 |
---|---|---|
mode | 设置滑动模式,'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
speed | 内容切换速度,数字,ms | 500 |
startSlide | 初始滑动位置,数字 | 0 |
randomStart | 随机初始滑动位置 | true |
infiniteLoop | 循环滑动,如果设置为true时,则到最后滑动位置时会切换到初始位置 | true |
easing | 切换动画扩展,可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果 | null |
captions | 设置显示图片标题,当滑动内容为图片时并设置属性title,可以显示图片标题 | false |
video | 支持视频,当设置为true时,需要jquery.fitvids.js支持 | false |
pager | 设置是否显示分页,设置为true时,会在滑动内容下方显示分页图标 | true |
controls | 设置是否显示上一副和下一幅按钮 | true |
auto | 设置是否自动滑动 | false |
pause | 自动滑动时停留时间,数字,ms | 4000 |
autoHover | 当鼠标滑向滑动内容上时,是否暂停滑动 | false |
更多参数及资料请参考官网:bxSlider官网 bxSlider Github