响应式WEB设计可以让WEB页面自适应各种尺寸的屏幕，俨然已经成为了当今WEB设计趋势。本文将介绍一款基于jQuery的响应式内容滑动插件以及如何使用这款插件到你的WEB应用中，满足各类WEB设计需求。
1.充分响应各种设备，适应各种屏幕；
2.支持多种滑动模式，水平、垂直以及淡入淡出效果；
3.支持图片、视频以及任意html内容；
4.支持触摸滑动；
5.支持Firefox，Chrome，Safari，iOS，Android，IE7+
1、首先是加载jQuery库，以及bxSlider插件文件和相关CSS文件，您可以从官方网站下载最新版本的。
- <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();
- });
这样，一个超酷的内容滑动效果就实现了，查看，将浏览器窗口放大和缩小可以看到滑动内容会随着浏览器窗口自动调整大小。bxSlider提供了丰富的配置选项，可以设置不同参数满足各种客户需求，来看它的选项配置。
bxSlider提供了丰富的选项可配置，以下我们列出最主要也是最常用的选项设置。
| 参数 | 描述 | 默认值 |
| mode | 设置滑动模式，'horizontal':水平, 'vertical':垂直, 'fade':淡入淡出 | horizontal |
| speed | 内容切换速度，数字，ms | 500 |
| startSlide | 初始滑动位置，数字 | 0 |
| randomStart | 随机初始滑动位置 | true |
| infiniteLoop | 循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置 | true |
| easing | 切换动画扩展，可以借助设置不同的切换动画效果 | null |
| captions | 设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题 | false |
| video | 支持视频，当设置为true时，需要支持 | false |
| pager | 设置是否显示分页，设置为true时，会在滑动内容下方显示分页图标 | true |
| controls | 设置是否显示上一副和下一幅按钮 | true |
| auto | 设置是否自动滑动 | false |
| pause | 自动滑动时停留时间，数字，ms | 4000 |
| autoHover | 当鼠标滑向滑动内容上时，是否暂停滑动 | false |
更多bxSlider的选项设置，请参照bxSlider官网：http://bxslider.com/options
零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。
