jQuery带多种过渡特效的幻灯片插件Vmc Slider

使用方法：

引入css样式文件

<link rel="stylesheet" type="text/css" href="css/style.css">

引入jQuery库文件

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/vmc.slider.full.min.js"></script>

插件初始化、参数配置

$(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
});
});

HTML结构

<div class="content" style="width:1000px;height:300px;margin:30px auto;overflow:hidden;">
    <div id="slider">
        <a href="#"><img src="img/demo1.jpg"/></a>
        <a href="#"><img src="img/demo2.jpg"/></a>
        <a href="#"><img src="img/demo3.jpg"/></a>
        <a href="#"><img src="img/demo4.jpg"/></a>
        <a href="#"><img src="img/demo5.jpg"/></a>
        <a href="#"><img src="img/demo6.jpg"/></a>
    </div>
</div>

配置参数

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，单位：毫秒。

效果库/扩展

vmc.slider.effects.js 是 Vmc Slider 插件默认效果库，可通过 $.vmcSliderEffects() 方法扩展。扩展效果库请在创建 vmcSlider 之前运行 $.vmcSliderEffects() 方法。

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

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