响应式内容滑动插件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="jquery.bxslider.css"> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="jquery.bxslider.min.js"></script>

2、准备滑动内容，我们创建一个ul.bxslider，然后在其子元素li中加入滑动内容，滑动内容可以是图片、视频以及任意html内容：

<ul class="bxslider"> 
      <li><img src="images/s1.jpg" /></li> 
      <li><img src="images/s2.jpg" /></li> 
      <li><img src="images/s3.jpg" /></li> 
</ul>

3、调用bxSlider插件，当页面内容加载完时调用bxSlider。

$(function(){ 
    $('.bxslider').bxSlider(); 
});

这样，一个超酷的内容滑动效果就实现了，将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。bxSlider提供了丰富的配置选项，可以设置不同参数满足各种客户需求，来看它的选项配置。

bxSlider选项设置

bxSlider提供了丰富的选项可配置，以下我们列出最主要也是最常用的选项设置。

参数描述默认值mode设置滑动模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出horizontalspeed内容切换速度，数字，ms500startSlide初始滑动位置，数字0randomStart随机初始滑动位置trueinfiniteLoop循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置trueeasing切换动画扩展，可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果nullcaptions设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题falsevideo支持视频，当设置为true时，需要jquery.fitvids.js支持falsepager设置是否显示分页，设置为true时，会在滑动内容下方显示分页图标truecontrols设置是否显示上一副和下一幅按钮trueauto设置是否自动滑动falsepause自动滑动时停留时间，数字，ms4000autoHover当鼠标滑向滑动内容上时，是否暂停滑动false

更多bxSlider的选项设置，请参照bxSlider官网：http://bxslider.com/options