响应式内容滑动插件jQuery.bxSlider

bxSlider特性

1.充分响应各类设备，适应各类屏幕；

2.支持多种滑动模式，水平、垂直以及淡入淡出效果；

3.支持图片、视频以及任意html内容；

4.支持触摸滑动；

5.支持Firefox，Chrome，Safari，iOS，Android，IE7+

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

中文说明可参考：http://www.helloweba.com/view-blog-219.html

如何使用bxSlider

一、首先是加载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> 

 二、准备滑动内容，咱们建立一个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> 

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

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

 

这样，一个超酷的内容滑动效果就实现了，查看演示demo，将浏览器窗口放大和缩小能够看到滑动内容会随着浏览器窗口自动调整大小。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