bxslider插件使用

1. bxslider特性

充分响应各种设备，适应各种屏幕；
支持多种滑动模式，水平、垂直以及淡入淡出效果；
支持图片、视频以及任意html内容；
支持触摸滑动；
支持Firefox，Chrome，Safari，iOS，Android，IE7+

2. 常用参数

参数名	说明	默认值
mode	定义slider滚动的方向，有三个值可供选择:'horizontal', 'vertical', 'fade'	horizontal
speed	幻灯片滚动的速度,默认的单位为毫秒（MS）	默认是500
auto	设置是否自动滑动	 默认false
slideMargin	每张幻灯片之间的间距	默认0 整数
startSlide	开始的第一张幻灯片的索引，值从0开始计数 	默认0 整数
randomStart	是否开启随机切换幻灯片 	默认false
captions	 包括图片的说明文字，标题是来自图像的 title 属性	
ticker	在代码模式下使用滑块（类似于新闻） 	默认false
responsive	是否自动使幻灯片改变大小 	默认true
infiniteLoop	循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置	默认true
pager	设置是否显示分页，设置为true时，会在滑动内容下方显示分页图	默认true
controls 	设置是否显示上一副和下一幅按钮 	默认true

3. 使用

3.1 引入库文件

jquery.bxslider.css
jquery.bxslider.min.js

3.2 设置html代码

    <ul class="bxslider">
        <li><img src="/banner/images/banner1.jpg" title="显示标题" /></li>
        <li><img src="/banner/images/banner2.jpg" title="显示标题" /></li>
        <li><img src="/banner/images/banner3.jpg" title="显示标题" /></li>
    </ul>

3.3 初始化设置

    <script type="text/javascript">
        $(function () {
            $('.bxslider').bxSlider({
                mode: 'fade',
                speed: 500,
                captions: true, //显示标题title
                auto: true, //自动滚动幻灯片
            });
        });
    </script>