Vue实现上下层叠轮播图

目录

• 上下层叠轮播图
• 原生轮播图（无缝轮播图）

上下层叠轮播图

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。