jQuery slider 插件: bxSlider
2009年12月02日
bxSlider 是一个 jQuery 的插件，它可以实现 Slider 和滚动效果。这个插件使用非常简单，并且大小只有 8kb，非常轻量级，所以非常适合在站点和博客中使用。
bXSlder 模式
bxSlider 有三种模式：
- slide： 使用 slide （幻灯片）效果来查看图片。
- fade： 使用 fade （淡入淡出）效果来查看图片。
- ticker：使用滚动效果来显示文本。
bXSlder 使用
使用 bxSlider 首先要载入 jQuery Javascript 库。然后载入 bxSlider 代码。
下面就是一个简单的 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。
12 条评论 添加你的评论 →
1. adomit | 2009:12:02 - 21:15:40 | #
先杀个法，然后在学习那个图片效果。
一直以来都很喜欢图片能够有渐变效果。收藏了希望下回能用到。
2. 盗盗 | 2009:12:02 - 21:16:25 | #
Denis大大，你太牛逼了，真是啥都懂！
3. Denis | 2009:12:02 - 21:18:39 | #
额，这是很简单的 jQuery 代码！
4. 盗盗 | 2009:12:02 - 21:20:55 | #
奉承老大你的。
哈哈~其实俺也会滴~
5. Denis | 2009:12:02 - 21:28:45 | #
6. nipao | 2009:12:02 - 21:54:00 | #
好久没看Denis大哥的首页，变化真大
7. Denis | 2009:12:03 - 00:05:45 | #
效果不错吧？
8. feicun | 2009:12:03 - 10:04:37 | #
我同学说首页不好看，不够华丽，哈哈
9. SATURN | 2009:12:03 - 09:10:20 | #
JQuery真的是好强大， 简单的代码实现超酷的效果。
10. Evlos | 2009:12:03 - 09:49:22 | #
灰常强大，水煮鱼的推荐的东西是一定要来支持下的，呵呵 ~
11. 丸子 | 2009:12:03 - 11:48:49 | #
我都没注意。。。水煮鱼的首页大变样啊
12. bolo | 2009:12:03 - 16:14:48 | #
最低要求那个版本的jQuery库？