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库?