更新时间：2020-11-15 21:37:21
更新说明：新增pagination分页器选项配置和slideChange自定义事件监听，进一步提升易用性~~
更新时间：2020-09-19 21:59:06
更新说明：
1、新增页面可见性方法判断是否在页面不可见时关闭定时器。
2、详细使用说明见页面文档链接：
1 |
更新时间：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、具体使用：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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
1 2 3 4 5 6 7 8 9 10 11 12 | 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了。当然，也希望有大神能热心指导下如何将两者整合到一块去，感谢！(●'_'●)
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery移动端车牌号码输入
- 下一个特效： jQuery日程安排插件