网站设计中有一个常用的效果就是幻灯片图片展示，各种各样的插件中我推荐一个兼容性好的效果也棒呆的幻灯片。

Vmc Slider 是一款带多种过渡特效的jQuery幻灯片插件，该幻灯片内置了20种场景转换特效，可以帮助你轻松实现漂亮的图片切换效果。并且它支持包括IE6在内的多种浏览器，非常的实用。

效果演示  下载插件

一、使用方法

1、调入css和js文档。jquery库文件一定要在插件的js文件之前调用。

使用Vmc Slider需要引入jQuery和vmc.slider.full.min.js以及样式文件style.css。

<link rel="stylesheet" type="text/css" href="src/style.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="vmc.slider.full.min.js"></script>

2、html结构

该jQuery幻灯片的HTML结构非常简单：使用一个<div>来包裹一组图片元素。所以如果结合后台上传幻灯片，在前端用for循环可以很好的改变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>

3、初始化插件

大部分插件都需要初始化。

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jQuery幻灯片插件。

<script type="text/javascript">
		$(function() {
			$('#slider').vmcSlider({
				width: 1000,
				height: 300,
				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,
				random: false,
				duration: 2000,
				speed: 900
			});
		});
	</script>

二、配置参数

• width：幻灯片的宽度，类型：int，默认值1000，单位像素。

• height：幻灯片的高度，类型：int，默认值330，单位像素。

• gridCol：网格列数，为同时在垂直和水平方向都有变化的转场效果提供舞台切片的列数。类型：int，默认值10。

• gridRow：网格行数，为同时在垂直和水平方向都有变化的转场效果提供舞台切片的行数。类型：int，默认值5。

• gridVertical：栅格列数，为只在水平方向上变化的转场效果提供舞台切片的列数。类型：int，默认值20。

• gridHorizontal：栅格行数，为只在垂直方向上变化的转场效果提供舞台切片的行数。类型：int，默认值10。

• autoPlay：幻灯片是否自动播放。类型：boolean，默认值：true。

• ascending：图片按照升序播放。类型：boolean，默认值：true。

• effects：使用的转场动画效果列表。插件自身只有淡入淡出(fade)效果可用。使用更多效果，可引入vmc.slider.effects.js效果库，或者自定义动画效果。数组长度为0时不显示转场动画效果，您也可根据需要选择部分效果使用，在非随机情况下按照数组定义顺序显示动画效果。类型：array，默认值：['fade']。

• ie6Tidy：IE6下精简转场效果，只保留淡入淡出效果。类型：boolean，默认值：false。

• random：随机使用转场动画效果。类型：boolean，默认值：false。

• duration：图片停留时长。类型：int，默认值：4000，单位：毫秒。

• speed：转场效果时长。类型：int，默认值：900，单位：毫秒。