jQuery slider 插件: bxSlider

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