jquery.bxSlider响应式滑动插件

本文将介绍一款基于jQuery的响应式内容滑动插件，支持多种滑动模式（水平、垂直、淡入淡出效果），支持移动端并兼容主流浏览器。

分类：图片代码 > 图片滑动难易：中级

查看演示下载资源下载积分： 20 积分

1、首先引入jQuery.js，bxSlider.js和bxSlider.css。

<link rel="stylesheet" type="text/css" href="jquery.bxslider.css"> 
<script src="jquery.js"></script> 
<script src="jquery.bxslider.min.js"></script>

2、我们创建一个ul.bxslider，让子元素li中加入滑动内容，滑动内容可以是图片、视频或任意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> 
</ul>

3、调用bxSlider很简单.代码如下：

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

演示文件里提供了4个demo，主题分别为<a href="../jquery/demo/16/index.html" target='_blank'>演示1:标准</a> <a href="../jquery/demo/16/index2.html" target='_blank'>演示2：带标题的图片滑动</a> <a href="../jquery/demo/16/index3.html" target='_blank'>演示3：自动滑动控制</a><a href="../jquery/demo/16/index4.html" target='_blank'>演示4：垂直滑动</a>。

bxSlider参数设置

参数	描述	默认值
mode	滑动三种模式：'horizontal':水平、'vertical':垂直及'fade':淡入淡出	horizontal
speed	内容切换速度(ms)	500
startSlide	初始滑动位置	0
randomStart	是否开启随机初始滑动位置	true
infiniteLoop	循环滑动，若为true，则到最后滑动位置时会切换到初始位置	true
easing	切换动画扩展效果	null
captions	是否显示图片标题，当滑动内容为图片时并设置属性title，就会显示图片标题	false
video	支持视频，当设置为true时，必须要引入jquery.fitvids.js	false
pager	是否显示分页，当为true时，会在滑动内容下方显示分页条	true
controls	是否显示上一组和下一组控制按钮	true
auto	是否自动滑动	false
pause	自动滑动停留时间(ms)	4000
autoHover	鼠标滑到内容上时，是否暂停滑动	false