js堆叠卡片轮播图(原创)

 查看演示  website  立即下载

更新时间：2020-11-15 21:37:21

更新说明：新增pagination分页器选项配置和slideChange自定义事件监听，进一步提升易用性~~

更新时间：2020-09-19 21:59:06

更新说明：

1、新增页面可见性方法判断是否在页面不可见时关闭定时器。

2、详细使用说明见页面文档链接：

https://gejiuyuan.gitee.io/js-dui-die-qia-pian-lun-bo-tu-shi-yong-shuo-ming/

更新时间：2020-09-14 09:23:46

更新说明：上次文件提交有误,现已修改

更新时间：2020-06-09 00:13:21

更新说明：用setAttribute替代dataset（IE11才支持）设置data-自定义属性，从而兼容至IE10~~（但不兼容IE9，毕竟不支持transitionend事件）

更新时间：2020-06-07 21:26:23

更新说明：

    1、移除jQuery依赖，改用原生js；

    2、不在直接操作DOM元素Style属性，而选择在styleSheets中插入css新规则进行样式控制；

    3、具体使用：    

let back = new Back(wrapper, {
    direction: 'vertical', // 垂直方向，默认：horizontal，水平方向
    transition: {
        value: '500ms linear', //transition值，写法与css一样。默认为500ms             
        waitForTransition: true, //是否等待卡片切换完成再执行下一次轮播，默认为false。     
    }, // 也可写成：transition: '300ms'，此时waitForTransition默认为false       
    autoplay: {
        enable: true, //自动轮播开关           
        delay: 4000, // 自动轮播时间间隔      
    }, // 也可写成：autoplay:true/false，若为true，delay默认为7000（毫秒）       
    isClickSlide: true, //是否点击卡片切换，默认为false       
    offsetDistance: 100， // 卡片公共偏移值(可选)        
    opacity: .9, // 基础透明度（可选）        
    scale: {
        x: .9, //x轴缩放基值，若不写则为1           
        y: .7, //y轴缩放基值，若不写则为1         
    }, //也可写成：scale: .9，此时代表：scale: {x:.9,y:.9} ，可选填        
    transformOrigin: 'center bottom', // transformOrigin原点，写法参照css语法（可选）       
    navigation: {
        nextEl: $('.demo4 .btn-right'), //切换下一张的点击按钮，默认为null            
        prevEl: $('.demo4 .btn-left') //切换上一章的点击按钮，默认为null      
    },
    baseIndex: 100， //卡片的基础zIndex值，值越高，越能避免被其他元素覆盖
});

更新说明：补添了上下切换，只要设置direction='vertical'即可，若不写direction参数则代表左右切换。

更新时间：2019-11-21 09:56:04

var $demo1 = $("div.demo1")；
var carousel = new Carousel($demo1.children("ul.container"), { //卡片的父容器
    opacity: .9, //透明度
    scale: [.9], //transform缩放比例，注：
    transition: "300ms", //过渡时长
    switch_btn: $demo1.children("i.btn-direct"), //左右切换按钮
    offset: 100, //间距偏移值，默认为：ul父容器宽度/（卡片数量-1）
    isClickCard: true, //是否开启卡片点击切换，默认false
    isAuto: true, //是否自动轮播，默认false
    interval: 4000 //轮播间隔，默认5s,
    "transform-origin": "center bottom", //transform原点
});

这几天正好学到原型和面向对象知识，就做了个轮播图插件练习一下。该插件轮播效果利用transform和transition实现，不兼容IE9及以下。不过，由于个人水平有限，暂时只写了左右切换，如果需要上下切换的话，可以手动修改插件里的几个参数，也就是将width、left、translate改成相应的height、top、translateY值就ok了。当然，也希望有大神能热心指导下如何将两者整合到一块去，感谢！(●'_'●)

PREVIOUS:
NEXT:
jQuery日程安排插件
jQuery移动端车牌号码输入