用在官网中的多张图片无限滚动播放的效果
dom结构
要注意的是wrapper代表的展示部分,宽度1200px(根据设计来),inner是多张图片的实际宽度,图片要多来一份,因为图片是往左一直移动的。当第6张图片也移动出屏幕时后面要接上第一张图片,才能有无限循环的效果。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <div class="life-wrapper"> <div class="life-wrapper-inner" ref="wrapperInner"> <img src="@/assets/partnerHome/shenghuo1.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo2.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo3.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo4.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo5.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo6.png" class="shenghuo-item" alt=""> 重复了一遍 <img src="@/assets/partnerHome/shenghuo1.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo2.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo3.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo4.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo5.png" class="shenghuo-item" alt=""> <img src="@/assets/partnerHome/shenghuo6.png" class="shenghuo-item" alt=""> </div> </div>
|
css部分
wrapper要overflow: hidden;
1 2 3 4 5 6 7 8 9 10 11 12
| .life-wrapper{ width: 1200px; overflow: hidden; margin: 40px auto; .life-wrapper-inner{ display: flex; .shenghuo-item { width: 291px; height: 350px; } } }
|
js部分
无限滚动核心就是用了定时器,让图片15ms向左移动一像素(用translateX移动),图片看起来运动的就比较顺滑。当最后一张图片移出屏幕时,啪,让translateX置为0,这样可以实现无线滚动。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| export default { data() { return { count: 0, stopFlag: false, timer: null } }, mounted() { this.$refs.wrapperInner.addEventListener('mouseenter', () => { this.stopFlag = true; }); this.$refs.wrapperInner.addEventListener('mouseleave', () => { this.stopFlag = false; }); let dom = this.$refs.wrapperInner.style this.timer = setInterval(() => { if (this.stopFlag){ return } this.count++ if (this.count >= 291 * 6) { this.count = 0 } dom.transform = `translateX(-${this.count}px)` }, 15) }, unmounted(){ clearInterval(this.timer) } }
|