vmcSlider 图片轮播插件

vmcSlider 是一款JQuery幻灯片插件,其丰富炫酷的转场特效能够帮助你在项目中轻松实现漂亮的图片切换效果。

特点
FEATURE

  • 支持左右箭头和圆点按钮播放控制。
  • 能够灵活制定播放方式及转场特效顺序。
  • 经过多种浏览器,包括IE6,测试均能很好兼容。
  • 提供接口,支持自定义转场效果。方便网页开发者自行编写更多转场特效。
  • 优化转场特效算法提高执行效率。

演示
DEMO

下载
DOWNLOAD

使用
USAGE

<!-- 引入JQuery -->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<!-- 引入vmcSlider插件脚本及样式文件 -->
<script type="text/javascript" src="vmc.slider.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="src/style.css" />

<!-- Javascript -->
<script type="text/javascript">
	/* 配置选项 */
	var options = {
		width: 1000, // 宽度
		height: 330, // 高度
		gridCol: 10, // 网格列数
		gridRow: 5, // 网格行数
		gridVertical: 20, // 栅格列数
		gridHorizontal: 10, // 栅格行数
		autoPlay: true, // 自动播放
		ascending: true, // 图片按照升序播放
		effects: [ // 使用的转场动画效果
			'fade', 'fadeLeft', 'fadeRight', 'fadeTop', 'fadeBottom', 'fadeTopLeft', 'fadeBottomRight',
			'blindsLeft', 'blindsRight', 'blindsTop', 'blindsBottom', 'blindsTopLeft', 'blindsBottomRight',
			'curtainLeft', 'curtainRight', 'interlaceLeft', 'interlaceRight', 'mosaic', 'bomb', 'fumes'
		],
		ie6Tidy: false, // IE6下精简效果
		random: false, // 随机使用转场动画效果
		duration: 4000, // 图片停留时长(毫秒)
		speed: 900, // 转场效果时长(毫秒)
		flip: function() {}, // 翻页时触发事件
		create: function() {} // 创建完成触发事件
	};
	/* 创建轮播效果 */
	$('#slider').vmcSlider(options);
</script>

<!-- HTML -->
<div id="slider">
	<a href="#"><img src="demo1.jpg"/></a>
	<a href="#"><img src="demo2.jpg"/></a>
	<a href="#"><img src="demo3.jpg"/></a>
	<a href="#"><img src="demo4.jpg"/></a>
	<a href="#"><img src="demo5.jpg"/></a>
	<a href="#"><img src="demo6.jpg"/></a>
</div>

选项
OPTIONS

width

类型:int,默认值:1000,单位:px

宽度

height

类型:int,默认值:330,单位:px

高度

gridCol

类型:int,默认值:10

网格列数,为同时在垂直和水平方向都有变化的转场效果提供舞台切片的列数。

gridRow

类型:int,默认值:5

网格行数,为同时在垂直和水平方向都有变化的转场效果提供舞台切片的行数。

gridVertical

类型:int,默认值:20

栅格列数,为只在水平方向上变化的转场效果提供舞台切片的列数。

gridHorizontal

类型:int,默认值:10

栅格行数,为只在垂直方向上变化的转场效果提供舞台切片的行数。

sideButton

类型:boolean,默认值:true

是否显示侧边翻页按钮。

navButton

类型:boolean,默认值:true

是否显示圆点导航按钮。

autoPlay

类型:boolean,默认值:true

是否自动播放。

ascending

类型:boolean,默认值:true

图片按照升序播放。

effects

类型:array,默认值:['fade']

使用的转场动画效果列表。插件自身只有淡入淡出(fade)效果可用。使用更多效果,可引入vmc.slider.effects.js效果库,或者自定义动画效果。

数组长度为0时不显示转场动画效果,您也可根据需要选择部分效果使用,在非随机情况下按照数组定义顺序显示动画效果。

ie6Tidy

类型:boolean,默认值:false

IE6下精简转场效果,只保留淡入淡出效果。

random

类型:boolean,默认值:false

随机使用转场动画效果。

duration

类型:int,默认值:4000,单位:毫秒

图片停留时长。

speed

类型:int,默认值:900,单位:毫秒

转场效果时长。

flip

类型:function

翻页时触发事件。

create

类型:function

创建完成触发事件。

方法
METHODS

option(optionName, value)

设置选项值

例子:

// 设置随机使用转场动画效果
$('#slider').vmcSlider('option', 'random', true);
// 设置使用指定三种转场效果
$('#slider').vmcSlider('option', 'effects', ['fadeTop', 'mosaic', 'bomb']);

事件
EVENTS

vmcsliderflip(event, vmcslider)

切换图片时触发该事件

参数:event 参考JQuery Event,vmcslider 当前实例化对象

// 初始化回调函数
$('#slider').vmcSlider({
        flip: function(event, vmcslider) {} 
});
// 绑定vmcsliderflip事件
$('#slider').on('vmcsliderflip', function(event, vmcslider) {} );

vmcslidercreate(event, vmcslider)

vmcSlider 被创建时触发该事件

参数:event 参考JQuery Event,vmcslider 当前实例化对象

// 初始化回调函数
$('#slider').vmcSlider({
        create: function(event, vmcslider) {} 
});
// 绑定vmcslidercreate事件
$('#slider').on('vmcslidercreate', function(event, vmcslider) {} );

效果库/扩展
EFFECTS LIBRARY

vmc.slider.effects.js 是 vmcSlider 插件默认效果库,可通过 $.vmcSliderEffects() 方法扩展。

扩展效果库请在创建 vmcSlider 之前运行 $.vmcSliderEffects() 方法。

注:vmc.slider.full.js 中已包含 vmc.slider.effects.js 效果库。

// 添加单个转场效果
$.vmcSliderEffects('name', function() {
    // code...
});
// 批量添加转场效果
$.vmcSliderEffects({
    'effectName_1': function() {
        // code...
    },
    'effectName_2': function() {
        // code...
    }
    // more...
});