我平时用到图片切换的效果较多，所以自己封装了个插件。支持淡入淡出、水平方向切换、垂直方向切换、卡片样式切换

使用方法

引用相应js文件到页面，并对元素调用相应方法 

<script src="jquery.min.js"></script>
<script src="sliderPic.js"></script>
<script type="text/javascript" charset="utf-8">
    $(function() {
        var bannerSlider = $('.banner').sliderPic({
            piclist: '.piclist',
            btnlist: '.btnbox',
            mode: 'slidX',
            autoplay: 5000,
            speed: 600,
            loop: true
        });
        $('.next-btn').on('click', function() {
            bannerSlider.moveNext();
        });
    });
</script>

html结构 

<div class="banner">
    <ul class="piclist">
        <li style="background-image:url(1.jpg)"></li>
        <li style="background-image:url(2.jpg)"></li>
    </ul>
    <div class="btnbox"></div>
</div>
<a class="next-btn"></a>

参数设置

配置参数

参数名 类型 默认值 可选值 说明
piclist String .piclist 自定义 图片列表 选择器
btnlist String .btnlist 自定义 索引容器 选择器
mode String fade fade | slidX | slidY | turnX | turnY 动画的播放方式(淡入淡出 | 水平滚动 | 垂直滚动 | 水平转轮 | 垂直转轮)
speed Number 600 自定义 滚动速度。每次切换时持续的时间
autoplay Number 0 自定义 自动播放频率。0表示不自动播放
loop Boolean false true | false 无缝循环。当播放方式为fade时，此参数无用
viewNum Number 1 自定义 可视区域显示的滑块数。当播放方式为fade时，此参数无用
trunMain Number 2 自定义 突出的转轮所处位置(从1开始计数。该参数只有转轮播放有效)
turnOpacityRatio Number 0.2 自定义 转轮透明比例(该参数只有转轮播放有效)
turnScaleRatio Number 0.2 自定义 转轮缩放比例(该参数只有转轮播放有效)
startSwitch Function function(index){} 开始准备切换图片的回调方法(回调参数index为结束切换后当前图片的index值)
endSwitch Function function(index){} 结束切换后的回调方法(回调参数index为当前图片的index值)
resize Function function(view){} 滑块容器尺寸变化时的回调方法(回调参数view为当前可视区显示滑块数)

基础属性和方法

参数名 类型 默认值 示例 说明
movePrev Function sliderlPic.movePrev() 滚动到上一张图片
moveNext Function sliderlPic.moveNext() 滚动到下一张图片
moveTo Function sliderlPic.moveTo(2) 滚动到指定索引的图片
pause Function sliderlPic.pause() 如果图片设置了自动滚动，调用此方法可以暂停滚动
proceed Function sliderlPic.proceed() 与pause()配套使用，调用此方法将继续滚动
update Function sliderlPic.update({viewNum: 2}) 更新组件
查看演示 立即下载