html文字图片一起轮播卡片,js堆叠卡片轮播图(原创)

插件描述：js堆叠卡片轮播图，利用transition过渡实现，支持点击左右按钮切换、卡片切换以及自动轮播

更新时间：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:04var $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了。当然，也希望有大神能热心指导下如何将两者整合到一块去，感谢！(●'_'●)