响应式jquery幻灯片插件bxSlider

bxSlider 是一款免费的 jQuery Slider 的插件，它可以实现 内容和图片幻灯片滚动效果，支持响应式，自适应各种尺寸的屏幕，桌面和手机等各种设备都能完美适应。

bxSlider 详细功能

• 完全响应式：支持所有设备。
• 支持水平，垂直和淡入淡出等模式。
• 支持图片，视频和 HTML 内容等幻灯片。
• 内置支持触摸和滑动等高级操作。
• 使用 CSS transitions 来实现幻灯片动画（原生硬件加速）。
• 完整的回调 API 和接口。
• 插件体积非常小，但是包含完整的主题，非常容易集成。
• 支持 Firefox, Chrome, Safari, iOS, Android, IE7+ 等几乎所有的浏览器。
• 非常详细的功能配置选项。

bxSlider下载地址：

http://bxslider.com/lib/jquery.bxslider.zip

bxSlider使用教程

1. 首先加载 jQuery JS 库和下载并加载 bxSlider 的 JS 和 CSS 库：

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2. 创建一个对应的 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：

$(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官网：http://bxslider.com/options