jQuery Slider 插件bxSlider介绍

bxSlider 是一个 jQuery 的插件，它可以实现 Slider 和滚动效果。这个插件使用非常简单，并且大小只有 8kb，非常轻量级，所以非常适合在站点和博客中使用。

bXSlder 模式

bxSlider 有三种模式：

• slide： 使用 slide （幻灯片）效果来查看图片。
• fade： 使用 fade （淡入淡出）效果来查看图片。
• ticker：使用滚动效果来显示文本。

bXSlder 使用

使用 bxSlider 首先要载入 jQuery Javascript 库。然后载入 bxSlider 代码。

在加载 jQuery 和 bxSilder 的代码之后，还需要在页面的 head 中添加如下的 jQuery 代码：

$(document).ready(function(){
    $('#example3').bxSlider({
        mode: 'fade',
        speed: 3000,
        next_text: '下一张',
        prev_text: '上一张',
        width: 307,
        wrapper_class: 'example3_container'
    });
});

其他的效果请查看 bxSlider 的演示页面。

bxSlider 详细配置参数

bxSlider 有以下参数可以进行配置：

• mode: 模式，可以指定 'slide', 'fade', 'ticker' 这三种模式。
• speed: 速度，变换的时间，单位是毫秒。
• auto: 是否自动变换。
• controls: 用于添加按钮来进行手动变化，（可以和 auto 混合一起使用）。
• pause: 两次变换之间停留的时间（在 auto 为 true 才有效）。
• width: 容器元素的宽度（单位是像素）。
• prev_text: 上一个按钮的问本。
• next_text: 下一个按钮的文本。
• prev_img: 上一个按钮的图片。
• next_img: 下一个按钮的图片。
• ticker_direction: 滚动的方向，模式为 'ticker' 才有效。
• wrapper_class: 容器元素的 class 名字。

下载：bxSlider。