响应式内容滑动插件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

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(); 
}); 

这样，一个超酷的内容滑动效果就实现了，查看演示demo，将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。bxSlider提供了丰富的配置选项，可以设置不同参数满足各种客户需求，来看它的选项配置。

bxSlider选项设置

bxSlider提供了丰富的选项可配置，以下我们列出最主要也是最常用的选项设置。

 更多bxSlider的选项设置，请参照bxSlider官网：http://bxslider.com/options

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

标签：

原文地址：http://www.cnblogs.com/netserver/p/4594577.html