bxSlider图片滚动插件使用。

bxslider官网：http://bxslider.com/

Why should I use this slider? 我为什么要使用此滑块？

• Fully responsive - will adapt to any device    充分响应将适应任何设备

• Horizontal, vertical, and fade modes   水平、垂直和褪色模式

• Slides can contain images, video, or HTML content    幻灯片可以包含图像、视频或html内容

• Advanced touch / swipe support built-in    先进的触摸/滑动支持嵌入式

• Uses CSS transitions for slide animation (native hardware acceleration!)   使用CSS转换幻灯片动画效果

• Full callback API and public methods   所有的回调API和公共的方法

• Small file size, fully themed, simple to implement   较小的文件大小、完全主题、简单的实现

• Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+  浏览器支持：火狐、谷歌、安卓、IE7+

How to install  如何安装？

Step 1: Link required files   连接需要的文件

<!-- 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" />

Step 2: Create HTML markup   创建HTML标记

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

Step 3: Call the bxSlider  调出使用

Call .bxslider() on <ul class="bxslider">. Note that the call must be made inside of a $(document).ready() call, or the plugin will not work!

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