首页 > 代码库 > 响应式内容滑动插件bxSlider
响应式内容滑动插件bxSlider
bxSlider特性
1.充分响应各种设备，适应各种屏幕；
2.支持多种滑动模式，水平、垂直以及淡入淡出效果；
3.支持图片、视频以及任意html内容；
4.支持触摸滑动；
5.支持Firefox，Chrome，Safari，iOS，Android，IE7+
如何使用bxSlider
1、首先是加载jQuery库，以及bxSlider插件文件和相关CSS文件，您可以从官方网站下载最新版本的bxSlider。
<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"jquery.bxslider.css">
<script src=http://www.mamicode.com/"//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src=http://www.mamicode.com/"jquery.bxslider.min.js"></script>
2、准备滑动内容，我们创建一个ul.bxslider，然后在其子元素li中加入滑动内容，滑动内容可以是图片、视频以及任意html内容：
<ul class="bxslider">
<li><img src=http://www.mamicode.com/"images/s1.jpg" /></li>
<li><img src=http://www.mamicode.com/"images/s2.jpg" /></li>
<li><img src=http://www.mamicode.com/"images/s3.jpg" /></li>
</ul>
3、调用bxSlider插件，当页面内容加载完时调用bxSlider。
$(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官网：http://bxslider.com/options
响应式内容滑动插件bxSlider
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。