bxSlider是一个基于jQuery库的内容滑动轮播插件，支持自适应多种屏幕终端显示，轻量级易于使用。
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':淡入淡出 | 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有很多配置参数，使你能够用参数制作出各种各样的slider效果：
mode: 'horizontal', // 'horizontal', 'vertical', 'fade' 定义slider滚动的方向，有三个值可供选择
infiniteLoop: true, // true, false - display first slide after last 无限循环
hideControlOnEnd: false, // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果设置true，将会在最后一个幻灯片隐藏“next”，在最前面的幻灯片因此“prev”
controls: true, // true, false - previous and next controls 是否显示“previous”和“next”按钮
speed: 500, // integer - in ms, duration of time slide transitions will occupy 速度，单位为毫秒
easing: 'swing', // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
pager: true, // true / false - display a pager
pagerSelector: null, // jQuery selector - element to contain the pager. ex: '#pager'
pagerType: 'full', // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4 如果设置full，将显示1，2，3……，如果设置short，将显示1/4 .
pagerLocation: 'bottom', // 'bottom', 'top' - location of pager 页码的位置
pagerShortSeparator: '/', // string - ex: 'of' pager would display 1 of 4 页面分隔符
pagerActiveClass: 'pager-active', // string - classname attached to the active pager link 当前页码的className
nextText: 'next', // string - text displayed for 'next' control 下一页的文字
nextImage: '', // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以设置下一页为图片
nextSelector: null, // jQuery selector - element to contain the next control. ex: '#next'
prevText: 'prev', // string - text displayed for 'previous' control 上一页的文字
prevImage: '', // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一页的图片
prevSelector: null, // jQuery selector - element to contain the previous control. ex: '#next'
captions: false, // true, false - display image captions (reads the image 'title' tag) 是否显示图片的标题，读取图片的title属性的内容。
captionsSelector: null, // jQuery selector - element to contain the captions. ex: '#captions'
auto: false, // true, false - make slideshow change automatically 幻灯片自动滚动
autoDirection: 'next', // 'next', 'prev' - direction in which auto show will traverse 自动滚动的顺序
autoControls: false, // true, false - show 'start' and 'stop' controls for auto show 自动滚动的控制键
autoControlsSelector: null, // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
autoStart: true, // true, false - if false show will wait for 'start' control to activate
autoHover: false, // true, false - if true show will pause on mouseover 设置鼠标mouseover将会使自动滚动暂停
autoDelay: 0, // integer - in ms, the amount of time before starting the auto show
pause: 3000, // integer - in ms, the duration between each slide transition 过渡时间
startText: 'start', // string - text displayed for 'start' control 开始按钮的文字
startImage: '', // string - filepath of image used for 'start' control. ex: 'images/start.jpg' 开始按钮的图片
stopText: 'stop', // string - text displayed for 'stop' control 停止按钮的文本
stopImage: '', // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg' 停止按钮的图片
ticker: false, // true, false - continuous motion ticker mode (think news ticker)
// note: autoControls and autoControlsSelector apply to ticker!
tickerSpeed: 5000, // integer - has an inverse effect on speed. therefore, a value of 10000 will
// scroll very slowly while a value of 50 will scroll very quickly.
tickerDirection: 'next', // 'next', 'prev' - direction in which ticker show will traverse
tickerHover: false, // true, false - if true ticker will pause on mouseover
wrapperClass: 'bx-wrapper', // string - classname attached to the slider wraper
startingSlide: 0, // integer - show will start on specified slide. note: slides are zero based!
displaySlideQty: 1, // integer - number of slides to display at once
moveSlideQty: 1, // integer - number of slides to move at once
randomStart: false, // true, false - if true show will start on a random slide
回调函数
onSliderLoad
滑块完全加载后立即执行
default: function(){}options: function(currentIndex){ // your code here }arguments:
currentIndex: element index of the current slide
onSlideBefore
在每次幻灯片过渡之前立即执行。
default: function(){}options: function($slideElement, oldIndex, newIndex){ // your code here }arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlideAfter
每次幻灯片转换后立即执行。函数参数是当前的幻灯片元素（转换完成时）。
default: function(){}options: function($slideElement, oldIndex, newIndex){ // your code here }arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlideNext
在每次“下一个”幻灯片过渡之前立即执行。函数参数是目标（下一个）幻灯片元素。
default: function(){}options: function($slideElement, oldIndex, newIndex){ // your code here }arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
onSlidePrev
在每次“上一个”幻灯片过渡之前立即执行。函数参数是目标（上一个）幻灯片元素。
default: function(){}options: function($slideElement, oldIndex, newIndex){ // your code here }arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)
