jQuery插件：QQWorldSlider

前段时间，为公司2011版新首页改版的时候，开发了一个基于jQuery的幻灯片程序，不想越做越复杂，功能越来越强大，索性就做成一个jQuery插件。该插件以本站域名命名

Demo

随机模式，随机样式，自动播放，自动隐藏导航
Javascript
```
			jQuery('#home-slider').QQWorldSlider({
				mode: 'random',
				controls: true,
				autoHideControls: true,
				containerID: 'home-slider-container',
				mouseEvent: 'mouseover',
				pagerSelector: 'pager',
				autoHidePager: true,
				num: 1,
				hoverStopPlay: false,
				pause: 3000,
				easing: 'random',
				auto: 1
			});
			
```

Demo 1

cover模式，随机样式，自动播放

显示代码 >

HTML

<ol id="main-slider">
	<li><a href="http://www.qqworld.org" target="_blank"><img src="http://www.qqworld.org/wp-content/uploads/2012/04/image1.jpg" width="960" height="400" /></a></li>
	<li><a href="http://www.qqworld.org" target="_blank"><img src="http://www.qqworld.org/wp-content/uploads/2012/04/image2.jpg" width="960" height="400" /></a></li>
	<li><a href="http://www.qqworld.org" target="_blank"><img src="http://www.qqworld.org/wp-content/uploads/2012/04/image3.jpg" width="960" height="400" /></a></li>
	<li><a href="http://www.qqworld.org" target="_blank"><img src="http://www.qqworld.org/wp-content/uploads/2012/04/image4.jpg" width="960" height="400" /></a></li>
</ol>

Javascript

jQuery('#main-slider').QQWorldSlider({
	mode: 'cover',
	controls: true,
	containerID: 'slider-container',
	num: 1,
	pause: 3000,
	easing: 'easeInOutExpo',
	auto: 1
});

CSS

#slider-container .demo {
	width: 960px;
	height: 400px;
}
#main-slider {
	width: 960px;
	height: 400px;
}
#slider-container .QQWorldSlider-button {
	top: 45%;
}
#slider-container .gotoPrev {
	left: -58px;
}
#slider-container .gotoNext {
	right: -58px;
}

Demo 2

水平播放，同时显示4个单位，隐藏分页按钮，自动播放

1、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
2、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
3、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
4、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
5、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
6、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情

显示代码 >

HTML

<ol id="slider1">
	<li>
	<article>
		<h4>1、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>2、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>3、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>4、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>5、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>6、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
</ol>

Javascript

jQuery('#slider1').QQWorldSlider({
	mode: 'slide',
	num: 4,
	pause: 3000,
	containerID: 'post-slider-container1',
	pager: false,
	easing: 'easeInOutExpo',
	auto: 1
});

CSS

#post-slider-container1 .QQWorldSlider-button {
	top: 30%;
}
#post-slider-container1 .gotoPrev {
	left: -58px;
}
#post-slider-container1 .gotoNext {
	right: -58px;
}
#slider1 > li {
	width: 210px;
	padding: 0 5px
}
#slider1 > li h4 {
	margin: 0 0 5px 0;
}

Demo 3

垂直播放幻灯，同时显示3个单位，隐藏控制按钮和分页按钮，自动播放

1、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
2、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
3、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情
4、查看我们的公文包

因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。
阅读详情

显示代码 >

HTML

<ol id="slider2">
	<li>
	<article>
		<h4>1、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>2、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>3、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
	<li>
	<article>
		<h4>4、查看我们的公文包</h4>
		<p>因为我们掌握了先进的设计理念，专注于为客户打造一流的品牌网站，从而促进他们的销售额不断攀升。</p>
		<a href="#">阅读详情</a>
	</article>
	</li>
</ol>

Javascript

jQuery('#slider2').QQWorldSlider({
	mode: 'slide',
	type: 'vertical',
	num: 3,
	controls: false,
	pager: false,
	speed: 1500,
	pause: 3000,
	containerID: 'post-slider-container2',
	easing: 'easeInOutExpo',
	auto: 1
});

CSS

#post-slider-container2 {
	margin: 0;
}
#slider2 > li {
	width: 6000px;
	padding: 0 5px
}
#slider2 > li h4 {
	margin: 0 0 5px 0;
}

使用方法：

将如下代码插入<head></head>中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/qqworld_slider/jquery.easing.1.3.js"></script>
<link rel="stylesheet" href="js/qqworld_slider/qqworld_slider.css" type="text/css" media="all" />
<script src="js/qqworld_slider/jquery.qqworld_slider-min.js"></script>

将如下代码插入<body></body>中

<ol id="main-slider">
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ol>

在上述HTML代码之后加上如下js即可：

jQuery('#main-slider').QQWorldSlider();

当然，也可以在()中以json类的形式加入自定义的参数：

参数

详细的使用方法请参考demo

变量名	默认值	数据类型	说明
auto	false	布尔型	true/false，如果是true，则自动播放幻灯（可以用1代表true，0代表false）。
mode	'random'	字符串类型	'random'/'slide'/'cover'/'piece'/'matrix'，如果是random，将使用除slide之外的随机特效垂直播放幻灯,slide之外的模式下，num将被强制设为1。
type	'random'	字符串类型	各个模式下有特定的动画类型，默认是'random'，有如下选择： slide: horizontal, vertical cover: fade, slide, show piece: order, horizontal, vertical, slant, chaos, odd-even matrix: piano, bite。
favoriteAnimation	'random'	字符串类型	最喜欢的jQuery动画 'random'/'fadeIn'/'show'/'slideDown'，type为random时有效
favoriteDirection	'random'	字符串类型	最喜欢的动画方向，'random'/'horizontal'/'vertical'，type为random时有效
favoriteMatrix	'random'	字符串类型	最喜欢的Matrix模式 'random'/'piano'/'bite'，type为random时有效
x	10	整型	piece 和 matrix 模式下x轴切分的块数(必须设置可以被宽度除尽的值，还未解决无法除尽时的裂缝问题)
y	5	整型	piece 和 matrix 模式下y轴切分的块数(必须设置可以被高度除尽的值，还未解决无法除尽时的裂缝问题)
num	1	整型	同时显示单位的数量，范围应小于等于总数
pager	true	布尔型	true/false，如果false，则不显示分页导航按钮（可以用1代表true，0代表false）。
autoHidePager	false	布尔型	true/false, 如果 true: 自动隐藏分页导航按钮，鼠标经过时显示
pagerSelector	null	字符串型	分页导航按钮的ID，用来自定义分页导航的样式。
pagerActiveClass	'current'	字符串型	当前分页按钮的class。
mouseEvent	'click'	字符串类型	'mouseover'/'click'/'dblclick'/'mouseup'/'mousedown', 分页导航按钮的鼠标事件
controls	true	布尔型	true/false, 显示上一个和下一个按钮
autoHideControls	false	布尔型	true/false, 如果 true: 自动隐藏按钮，鼠标经过时显示
containerID	false	布尔型或字符串型	true/false/'string'，最外层容器的id，用来区分各个slider对象，自定义改ID下的元素样式
prevText	''	字符串类型	“上一个”按钮的文字
nextText	''	字符串类型	“下一个”按钮的文字
speed	1000	整型	以毫秒(ms)为单位，控制播放幻灯的速度
pause	3000	整型	以毫秒(ms)为单位，自动播放幻灯的间隔时间
easing	'random'	字符串类型	jQuery插件，easing的名称，可以在这里找到它的种类。
hoverStopPlay	true	布尔型	true/false，鼠标经过时停止自动播放幻灯
preload	true	布尔型	true/false，缓存slide模式外的图片

接口

建立幻灯片对象，并且通过接口控制幻灯片的播放、停止以及循环

var slider2 = jQuery('#slider2').QQWorldSlider();
slider2.controls.gotoNext();

接口函数	说明
controls.gotoNext()	播放下一个幻灯
controls.gotoPrev()	播放上一个幻灯
controls.goto(o)	播放第（o+1）的幻灯
controls.autoPlay()	自动播放
controls.stopAutoPlay()	停止自动播放

下载 QQWorldSlider 最新版
Beta v1.2.6-2012.5.4

Beta v1.2.6 特性 2012/5/4
1. 增加是否缓存图片的开关
Beta v1.2.5 特性 2012/4/5
1. 修复不显示next&prev导航按钮情况下，鼠标经过停止播放，
  鼠标移开不能继续播放的bug
2. 增加缓存下一个幻灯索引的功能
Beta v1.2.4 特性 2012/3/5
1. 增加幻灯图片预载功能
Beta v1.2.3 特性 2011/11/28
1. 增加 autoHidePager 参数，自动隐藏分页导航
2. 增加 autoHideControls 参数，自动隐藏上下页导航
Beta v1.2.2 特性 2011/10/23
1. 增加了piece模式下 chaos, odd-even 类型
2. 修复了piece模式下指定type无法正常运行的bug
Beta v1.2.1 特性 2011/10/16
1. 增加了过滤script标签的功能，防止脚本被重复调用
Beta v1.2.0 特性 2011/10/15
1. 对动画重新归类：
  mode: slide, permeate, piece, matrix
  每个mode又有如下类型：
  slide: horizontal, vertical
  permeate: fade, slide, show
  piece: order, horizontal, vertical, slant
  matrix: piano, bite
2. 修复permeate动画首次播放由于层级顺序问题导致显示不协调的bug
3. 修复permeate和piece动画从第二个逆向播放第一个时由于层级顺序问题导致显示不协调的bug
4. 遗留问题：如果切成的片数无法被长宽除尽，图片会出现裂缝。
5. 修复switch的case缺少break;导致幻灯项目重复重建的bug
6. 因为某版本升级后，动画播放完毕之前是不能继续播放的，所以以下功能就不需要了：
  //解决动画幻灯在网页失去焦点后一段时间变的空白
  $(window).focus(_this.controls.autoPlay);
  $(window).blur(_this.controls.stopAutoPlay);
Beta v1.1.4 特性 2011/9/6
1. 修复未设置自动播放时，窗口聚焦会激活自动播放功能的Bug
Beta v1.1.3 特性 2011/7/31
1. 增加开关控制鼠标经过幻灯是否停止播放
2. 增加更多的pager鼠标事件
3. 增加自定义pager的id控制pager的样式
Beta v1.1.2 特性 2011/7/27
1. 增加了随机特效，仅限fade,slide,show模式
2. 添加开关控制，动画完毕才能播放下一个幻灯
Beta v1.1.1 特性 2011/7/26
1. 精简了代码
2. 修复fade, slide, show 3种幻灯动画运行时间长会变空白的bug
Beta v1.1.0 特性 2011/7/24
1. 增加了fade, slide, show 3种幻灯动画
Beta v1.0.1 特性 2011/7/24
1. 自定义最外层容器的ID，用来自定义该ID下所有元素的样式
2. 自定义分页导航按钮的鼠标事件
Beta v1.0 特性 2011/7/23
1. 支持水平和垂直播放
2. 支持同时显示多个单位，无限循环播放
3. 支持自动播放
4. 支持前进和后退控制播放
5. 支持分页跳转
6. 支持通过接口控制幻灯片

QQWorldSLider

Beta v1.2.6 于 2012/4/5

阿Q编写

Demo

Javascript

Demo 1

HTML

Javascript

CSS

Demo 2

1、查看我们的公文包

2、查看我们的公文包

3、查看我们的公文包

4、查看我们的公文包

5、查看我们的公文包

6、查看我们的公文包

HTML

Javascript

CSS

Demo 3

1、查看我们的公文包

2、查看我们的公文包

3、查看我们的公文包

4、查看我们的公文包

HTML

Javascript

CSS

使用方法：

参数

接口

Beta v1.2.6 特性 2012/5/4

Beta v1.2.5 特性 2012/4/5

Beta v1.2.4 特性 2012/3/5

Beta v1.2.3 特性 2011/11/28

Beta v1.2.2 特性 2011/10/23

Beta v1.2.1 特性 2011/10/16

Beta v1.2.0 特性 2011/10/15

对动画重新归类：

Beta v1.1.4 特性 2011/9/6

Beta v1.1.3 特性 2011/7/31

Beta v1.1.2 特性 2011/7/27

Beta v1.1.1 特性 2011/7/26

Beta v1.1.0 特性 2011/7/24

Beta v1.0.1 特性 2011/7/24

Beta v1.0 特性 2011/7/23