Vue上下层叠轮播图
cmmboy1990 人气:4上下层叠轮播图
1.效果
2.代码
<template> <div class="article-main" @mouseover='mouseOver()' @mouseleave="mouseLeave()"> <img src="../../assets/a3.jpeg" :class="v1" /> <img src="../../assets/a2.jpeg" :class="v2" /> <img src="../../assets/a1.jpeg" :class="v3" /> <div class="dot-view"> <div :class="dot1"> </div> <div :class="dot2"> </div> <div :class="dot3"> </div> </div> <div class="arrow-view" v-show="isActive"> <img src="../../assets/btn-l-d.png" class="arrow-left" @click="toLeft()" /> <img src="../../assets/btn-r-d.png" class="arrow-right" @click="toRight()" /> </div> </div> </template>
<script> export default { name: 'home', data() { return { timer: '', isActive: false, value: 1, v1: 'banner wz1', v2: 'banner wz2', v3: 'banner wz3', dot1: 'dot-1 dot-color-actived', dot2: 'dot-2 dot-color-normal', dot3: 'dot-3 dot-color-normal' } }, methods: { toLeft() { this.value-- if (this.value == 0) { this.value = 3 } this.changeClasss() }, toRight() { this.value++ if (this.value > 3) { this.value = 1 } this.changeClasss() }, mouseOver() { this.isActive = true clearInterval(this.timer); }, // 移出 mouseLeave() { this.isActive = false this.timer = setInterval(this.get, 3000); }, changeClasss() { if (this.value == 1) { this.v1 = 'banner wz1' this.v2 = 'banner wz2' this.v3 = 'banner wz3' this.dot1 = 'dot-1 dot-color-actived' this.dot2 = 'dot-2 dot-color-normal' this.dot3 = 'dot-3 dot-color-normal' } if (this.value == 2) { this.v1 = 'banner wz2' this.v2 = 'banner wz3' this.v3 = 'banner wz1' this.dot1 = 'dot-1 dot-color-normal' this.dot2 = 'dot-2 dot-color-actived' this.dot3 = 'dot-3 dot-color-normal' } if (this.value == 3) { this.v1 = 'banner wz3' this.v2 = 'banner wz2' this.v3 = 'banner wz1' this.dot1 = 'dot-1 dot-color-normal' this.dot2 = 'dot-2 dot-color-normal' this.dot3 = 'dot-3 dot-color-actived' } }, get() { this.value++; if (this.value > 3) { this.value = 1 } this.changeClasss() } }, mounted() { this.timer = setInterval(this.get, 3000); }, beforeDestroy() { clearInterval(this.timer); }, } </script>
<style scoped> .arrow-left { position: absolute; left: 20px; top: 250px; cursor: pointer; } .arrow-right { position: absolute; left: 280px; top: 250px; cursor: pointer; } .article-main { width: 320px; height: 300px; background-color: #aaffff; position: relative; } .banner { border-radius: 4px; position: absolute; transition: all 1s; } .wz1 { width: 280px; height: 200px; left: 20px; z-index: 777; top: 20px; } .wz2 { width: 290px; height: 200px; left: 15px; top: 30px; z-index: 888; } .wz3 { width: 300px; height: 200px; left: 10px; top: 40px; z-index: 999; } .dot-view { position: absolute; left: 120px; top: 255px; display: flex; flex-direction: row; } .dot-color-actived { background-color: #ff0000; } .dot-color-normal { background-color: #333; } .dot-1 { width: 10px; height: 10px; border-radius: 50%; } .dot-2 { width: 10px; height: 10px; border-radius: 50%; margin-left: 20px; } .dot-3 { margin-left: 20px; width: 10px; height: 10px; border-radius: 50%; } </style>
原生轮播图(无缝轮播图)
效果图
<template> <div> <div class="swiper"> <ul ref="swiper" class="swipero"> <li v-for="(item, index) in items" :key="index"> <div v-text="item.name"></div> </li> </ul> </div> <div @click="preNext()">下一页</div> <div @click="preLast()">上一页</div> </div> </template>
<script> export default { data() { return { items: [ { id: 1, name: "1" }, { id: 1, name: "2" }, { id: 1, name: "3" }, ], timer: null, active: 0, flag: true, }; }, mounted() { this.init(); }, methods: { // 初始化克隆一个元素,用来解决视觉差的效果(瞬移) init() { let swiper = this.$refs.swiper; let first = swiper.firstElementChild.cloneNode(true); swiper.appendChild(first); }, //下一页 next() { let swiper = this.$refs.swiper; // 判断是否是最后一个 // debugger; if (this.$refs.swiper.children.length - 2 <= this.active) { // debugger setTimeout(() => { let swiper = this.$refs.swiper; this.active = 0; swiper.style.transition = "none"; swiper.style.left = -200 * this.active + "px"; }, 500); } this.active++; swiper.style.transition = "all .5s"; swiper.style.left = -200 * this.active + "px"; }, // 上一页 pre() { let swiper = this.$refs.swiper; // 判断是否是第一个,线瞬间移动到最后,然后再实现动画效果 if (this.active == 0) { let len = this.$refs.swiper.children.length; this.active = len - 1; // debugger swiper.style.transition = "none"; swiper.style.left = -200 * this.active + "px"; setTimeout(() => { this.active = len - 2; swiper.style.transition = "all .5s"; swiper.style.left = -200 * this.active + "px"; }, 300); } else { this.active--; swiper.style.transition = "all .5s"; swiper.style.left = -200 * this.active + "px"; // this.swiper(); } }, // 节流 throttle(callback,speed=3000) { let self = this; if (self.flag) { clearTimeout(this.timer); self.timer = setTimeout(() => { callback(); self.flag = true; }, speed); } this.flag = false; }, // 下一页(节流) preNext() { this.throttle(this.next,1000); }, // 上一页(节流) preLast() { this.throttle(this.pre,1000); }, // 自动轮播 swiper() { let self = this; setInterval(() => { self.pre(); }, 3000); }, }, }; </script>
<style lang="less" scoped> .swiper { width: 200px; height: 200px; overflow: hidden; position: relative; ul { position: absolute; bottom: 0; left: 0; width: 100vw; white-space: nowrap; li { width: 200px; height: 200px; display: inline-block; vertical-align: bottom; position: relative; // margin-right: 20px; transition: all 0.5s; > div { width: 100%; height: 100%; } &:nth-child(1) { background-color: aquamarine; } &:nth-child(2) { background-color: rgb(255, 204, 127); } &:nth-child(3) { background-color: rgb(255, 127, 144); } &:nth-child(4) { background-color: rgb(127, 255, 223); } } .active { width: 400px; height: 400px; } } } </style>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容