bxSlider 是一个 jQuery 的插件,它可以实现 Slider 和滚动效果。这个插件使用非常简单,并且大小只有 8kb,非常轻量级,所以非常适合在站点和博客中使用。
bxSlider 使用
使用 bxSlider 首先要载入 jQuery Javascript 库。然后载入 bxSlider 代码。
下面就是一个简单的 bxSlider 演示效果(RSS 用户需要返回页面才能看到效果):
-
WordPress:企业建站利器
WordPress 是一款风靡全球的开源 CMS 系统。在过去,它更多的应用于开设个人或多用户博客系统;但现在,它开始越来越多地应用于企业门户网站设计中。作为国内最早使用并对 WordPress 进行二次开发的爱好者之一,自从2006年初次接触 WordPress 系统开始,我就为其强大的功能,灵活的可扩展性,以及方便的可定制性所深深吸引。 -
美国虚拟主机推荐:Bluehost
Bluehost 建立于 1996 年,已经具有了十几年的虚拟主机服务经验,现已突破 100 万的网站托管数量,并且还以稳定速度向前发展。Bluehost 以其高质量的主机和口碑,在美国是深受好评的虚拟主机,在美国主机界也是屡获大奖。 -
bbPress 介绍,安装和中文包
bbPress 是一款开源论坛程序,它是一个非常容易使用的轻量级论坛程序,由于 bbPress 保持了体积小,重量轻,没有提供过多复杂的功能,所以速度非常快。对于有更多需求的用户来说,bbPress 也和 WordPress 一样提供了一个非常强大插件系统,让你添加各种功能扩充论坛。 -
主机推荐:(mt) Media Temple
Media Temple 简称 (mt) ,是一家比较独特的美国主机商,和其他美国商一样大肆的做广告不一样,(mt) 更关注社区,它的营销计划可以简单归纳为:Host Great Sites,所以选择了 (mt),就选择和许多伟大的站点做邻居。我爱水煮鱼目前正在使用 Media Temple 主机。 -
WordPress 相关日志插件:WordPress Related Posts
产生相关日志最好的方法就是通过 Tag,根据日志含有相同的 Tag 数越多,就认为日志相关性越强,所以我根据这一原理开发了 WordPress Related Posts 这个 WordPress 插件,它会根据日志的 tag 的相关性产生一个相关日志列表。 -
WordPress 主题教程:从零开始制作 WordPress 主题
创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题。本文是一个从零开始制作 WordPress 主题的教程,它会一步一步教你如何制作 WordPress 主题。
要实现上面的效果,我么加载 jQuery 和 bxSilder 的代码之后,还需要在页面的 head 中添加如下的 jQuery 代码:
$(function(){
$('#slides1').bxSlider({
prev_image: 'http://bxslider.com/images/btn_arrow_left.jpg',
next_image: 'http://bxslider.com/images/btn_arrow_right.jpg',
wrapper_class: 'slides1_wrap',
margin: 70,
auto: true,
auto_controls: true
});
});
bxSlider 详细配置参数
bxSlider 有以下参数可以进行配置:
$(document).ready(function(){
$('ul').bxSlider({
alignment: 'horizontal', // 'horizontal', 'vertical' - 幻灯片方向
controls: true, // 设置是否上一个/下一个按钮是否显示
speed: 500, // 速度,单位为毫秒
pager: true, // 是否显示页码
pager_short: false, // 是否显示短页码 (1/4)
pager_short_separator: ' / ', // 用于区分短页码的文本
margin: 0, // 间隔
next_text: 'next', // 下一个文本
next_image: '', // 下一个图片
prev_text: 'prev', // 上一个文本
prev_image: '', // 上一个图片
auto: false, // 是否自动切换
pause: 3500, // 停留时间 (auto mode only)
auto_direction: 'next', // 向那个方向移动 (auto mode only)
auto_hover: true, // 设置鼠标悬停的时候是否暂停
auto_controls: false, // 设置是否显示 'start'/'stop' 按钮 (auto mode only)
ticker: false, // determines if slideshow will behave as a constant ticker
ticker_controls: false, // determines if 'start'/'stop' ticker controls are displayed (ticker mode only)
ticker_direction: 'next', // order in which slides will transition (ticker mode only)
ticker_hover: true, // determines if slideshow will pause while mouse is hovering over slideshow
stop_text: 'stop', // 'stop' 按钮文本
start_text: 'start', // 'start' 按钮文本
wrapper_class: 'bxslider_wrap' // 外面 wapper 的 DIV 的 class 名字
});
});
下载:bxSlider。
演示:jQuery slider 插件: bxSlider


先杀个法,然后在学习那个图片效果。
一直以来都很喜欢图片能够有渐变效果。收藏了希望下回能用到。
支持 反对1
Denis大大,你太牛逼了,真是啥都懂!
支持 反对1
额,这是很简单的 jQuery 代码!
支持 反对1
奉承老大你的。
哈哈~其实俺也会滴~
支持 反对1
支持 反对1
好久没看Denis大哥的首页,变化真大
支持 反对1
效果不错吧?
支持 反对1
我同学说首页不好看,不够华丽,哈哈
支持 反对1
JQuery真的是好强大, 简单的代码实现超酷的效果。
支持 反对1
灰常强大,水煮鱼的推荐的东西是一定要来支持下的,呵呵 ~
支持 反对1
我都没注意。。。水煮鱼的首页大变样啊
支持 反对1
最低要求那个版本的jQuery库?
支持 反对1
我载了一个bxSlider2.0的,没有mode这个属性,只有alignment这个方向属性
支持 反对