原生js之堆叠卡片轮播图（另一种实现方式） |
您所在的位置：网站首页 › 网页卡片式代码 › 原生js之堆叠卡片轮播图（另一种实现方式） |
原生js之堆叠卡片轮播图（另一种实现方式）
|
请仔细瞅瞅轮播的示意图： css代码： .banner-card { width: 100%; height: 250px; line-height: 250px; background: #ffffff; position: relative; } .banner-card ul { width: 700px; height: 100%; margin: 0 auto; text-align: center; position: relative; } .banner-card li { width: 150px; height: 200px; position: absolute; top: 25px; list-style-type: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; cursor: pointer; } .banner-card li img { display: inline-block; width: 100%; height: 100%; } .one { z-index: 1; left: 75px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .two { z-index: 2; left: 175px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .three { left: 275px; z-index: 3; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .four { z-index: 2; left: 375px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .five { left: 475px; z-index: 1; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } .banner-card div { transition: 0.3s; position: absolute; top: 0; cursor: pointer; opacity: 0; } .banner-card div span { display: inline-block; font-size: 25px; } .left-btn { left: 20px; } .right-btn { right: 20px; }js代码 class bannerCard { constructor(options) { // 存储默认值 this.default = { classArray: ['one', 'two', 'three', 'four', 'five'], leftSlider: true, }; // options覆盖默认值 Object.assign(this.default, options); this.bannerWrap = document.getElementsByClassName('banner-card')[0]; this.lis = this.bannerWrap.getElementsByTagName('li'); this.time = null; // 将类数组转化为数组（ES6用法） this.lisArray = Array.from(this.lis); this.classlist = this.default.classArray; this.leftSlider = this.default.leftSlider; this.leftBtn = document.getElementsByClassName('left-btn')[0]; this.rightBtn = document.getElementsByClassName('right-btn')[0]; this.init(); } init() { // li的class进行初始化操作 this.initLiClass(); this.startTimer(); // 鼠标移入移出 this.listenMouseEvent(); // 鼠标点击按钮事件 this.listenMouseClickBtnEvent(); } // 开始定时器 startTimer() { this.timer() } // 清除定时器 clearTimer() { clearInterval(this.time) } // li的class进行初始化操作 initLiClass() { this.move(this.classlist) } // 定时器 timer() { let self = this; if(self.leftSlider) { self.time = setInterval(self.leftMove.bind(this), 2000) }else { self.time = setInterval(self.rightMove.bind(this), 2000) } } // 运动函数 move(list) { let self = this; self.lisArray.forEach((value, index) => { value.setAttribute('class', list[index]) }) } // 向左运动 leftMove() { let self = this; let popValue = self.classlist.pop(); self.classlist.unshift(popValue); self.move(self.classlist); } // 向右运动 rightMove() { let self = this; let shiftValue = self.classlist.shift(); self.classlist.push(shiftValue); self.move(self.classlist) } /* * 下边是鼠标的操作 */ // 监听鼠标移入移出事件 listenMouseEvent() { let self = this; // 添加鼠标移入触发事件 self.bannerWrap.addEventListener('mouseover', () => { self.clearTimer(); self.leftBtn.style.cssText = `left: 60px; opacity: 1`; self.rightBtn.style.cssText = `right: 60px; opacity: 1` }); // 添加鼠标移出触发事件 self.bannerWrap.addEventListener('mouseout', () => { self.startTimer(); self.leftBtn.style.cssText = `left: 20px; opacity: 0`; self.rightBtn.style.cssText = `right: 20px; opacity: 0`; }) } // 鼠标点击左右按钮事件 listenMouseClickBtnEvent() { let self = this; // 左点击事件 self.leftBtn.addEventListener('click', () => { self.leftMove(); }); //右点击事件 self.rightBtn.addEventListener('click', () => { self.rightMove(); }) } } // 可传入一个对象， 对象属性包含classArray: 一个数组。leftSlider: 布尔值 new bannerCard();在此之前：我也在网上找了一些，然而我的项目不使用jquery，都是原生的js。网上大部分都是jquery。所以我还是自己搞一个吧。 在此之前我也想过一些其他的，但是感觉实现起来确实有点困难，我也做过普通的轮播图，只是修改用一个left值就行，而这次针对这个堆叠卡片的轮播图，还是比较麻烦的。 突然想到了这种方式来实现。各位可以参考一下。 原理： 每一个li标签都对应着一个class，运行时，就修改每一个li标签的class，就可以达到效果了。然后把每一个li标签所对应的class都放在一个数组中。然后对这个数组进行排序，怎么排序呢？如果向左运动，删除数组中的最后一个，并把这个值添加到这个数组中的头部。 大家可以参考下哦。希望能帮助你们！ |
html代码：【本文地址】