Watch Star Fork

vomoc / vmc.slideJavaScript

加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
vmc.slide 是一款响应式图片轮播(幻灯片)JQuery插件,其丰富炫酷的转场特效能够帮助你在项目中轻松实现漂亮的图片切换效果。 https://github.com/vomoc/vmc.slide
vomoc 最后提交于 handle button
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md 4.61 KB

vmc.slide 图片轮播JQuery插件

演示

demo

更新说明

v2.0.0 - 2018.3.20

  1. 轮播图宽度可随父层元素变化,支持响应式网页
  2. 解决过场动画缝隙BUG
  3. 特效显示,固定尺寸可兼容到IE6,不固定尺寸兼容到IE9。不兼容情况显示默认淡入淡出转场
  4. 代码重构,对 1.x 版本不能无缝升级。

特点

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

使用

<script src="jquery-1.11.2.min.js"></script>
<script src="vmc.slide.js"></script>
<script src="vmc.slide.effects.js"></script>
方法一,使用 html 载入场景数据
<div id="slide">
    <ul>
         <li data-text="这是文本"><a href="javascript:;" target="_blank"><img src="demo1.jpg"/></a></li>
         ...
    </ul>
</div>

<script>
    var options = {};
    $('#slide').vmcSlide(options);
</script>
方法二,使用选项 option.data 载入场景数据
<div id="slide"></div>

<script>
    var options = {
        data: [
            {
                src: 'demo.jpg',
                text: '这是demo',
                href: 'http://www.vomoc.com/slide',
                target: '_blank'
            },
            ...
        ]
    };
    $('#slide').vmcSlide(options);
</script>

选项

data
  • 类型:array,默认值:[]
  • 场景数据
  • 说明:插件会从li标签解析数据与data数据合并,生成最终场景数据
// 示例
[
    {
        src: 'demo.jpg', // 图片地址
        text: '这是demo', // 说明文本
        href: 'http://www.vomoc.com/slide', // 超链接
        target: '_blank' // 链接打开方式
    }
]
width
  • 类型:int/string,默认值:'auto',单位:px
  • 宽度
  • 说明:为'auto'时,轮播图宽度随父层变化
height
  • 类型:int/string,默认值:'auto',单位:px
  • 高度
  • 说明:为'auto'时,轮播图高度随父层变化
imgWidth
  • 类型:int,默认值:0,单位:px
  • 图片实际宽度
  • 说明:为0时,图片实际宽度按照轮播图宽度计算
imgHeight
  • 类型:int,默认值:0,单位:px
  • 图片实际高度
  • 说明:为0时,图片实际高度按照轮播图高度计算
minWidth
  • 类型:int,默认值:0,单位:px
  • 轮播图最小宽度
minHeight
  • 类型:int,默认值:0,单位:px
  • 轮播图最小高度
gridTdX
  • 类型:int,默认值:10
  • 网格切片模式下x轴切片份数
gridTd
  • 类型:int,默认值:5
  • 网格切片模式下y轴切片份数
gridOdX
  • 类型:int,默认值:30
  • 水平切片模式下x轴切片份数
gridOdY
  • 类型:int,默认值:10
  • 垂直切片模式下y轴切片份数
sideButton
  • 类型:boolean,默认值:true
  • 是否显示两侧翻页按钮
navButton
  • 类型:boolean,默认值:true
  • 是否显示导航圆点按钮
showText
  • 类型:boolean/string,默认值:'auto'
  • 是否显示说明文本
  • 说明:为'auto'时,只有场景数据中text不为空才显示
isHtml
  • 类型:boolean,默认值:false
  • 说明文本是否是HTML
autoPlay
  • 类型:boolean,默认值:true
  • 是否自动播放
ascending
  • 类型:boolean,默认值:true
  • 是否按照升序播放
effects
  • 类型:array,默认值:['fade']
  • 转场动画效果名称
  • 说明:默认效果 fade 可兼容低版本IE浏览器,其他效果需要引入 vmc.slide.effects.js 扩展,或者自定义编写。效果名称请查看 vmc.slide.effects.jsvmc.slide.full.min.js 已包含 vmc.slide.effects.js
ie6Tidy
  • 类型:boolean,默认值:false
  • 是否IE6下精简效果
random
  • 类型:boolean,默认值:true
  • 是否随机使用转场动画效果
duration
  • 类型:int,默认值:4000,单位:毫秒
  • 图片停留时长
speed
  • 类型:int,默认值:800,单位:毫秒
  • 转场效果时长
hoverStop
  • 类型:boolean,默认值:true
  • 是否鼠标悬停暂停动画
flip
  • 类型:function
  • 翻页回调
  • 参数:
formIndex  // 离开场景索引
toIndex // 打开场景索引
created
  • 类型:function
  • 创建完成回调

方法

option(optionName, value)
  • 设置选项值

项目点评 ( 0 )

你可以在登录后,发表评论

搜索帮助