代码直接拷贝吧
<template> <div class="sg-body"> <div class="sg-swiper"> <div class="sg-sipwer-containers"> <div class="sg-swiper-container" v-for="(a, i) in sipwers" :key="i" :position="arr[i]" > 卡片{{ a }} </div> </div> <div class="sg-swiper-btns"> <div class="sg-swiper-left-btn" @click="left">左</div> <div class="sg-swiper-right-btn" @click="right">右</div> </div> </div> </div> </template> <script> export default { data() { return { sipwers: [1, 2, 3, 4, 5, 6], arr: [] }; }, mounted() { this.arr = [...Array(this.sipwers.length || 0)].map((v, i) => i); }, methods: { left() { this.arr.push(this.arr.shift()); //方法一:向左移动数组元素 // this.arr.splice(this.arr.length - 1, 0, this.arr.shift()); //方法二:向左移动数组元素 }, right() { this.arr.unshift(this.arr.pop()); //方法一:向右移动数组元素 // this.arr.splice(0, 0, this.arr.pop()); //方法二:向右移动数组元素 } } }; </script> <style lang="scss" scoped> .sg-body { .sg-swiper { position: relative; width: 1000px; height: 300px; .sg-sipwer-containers { margin: 0 auto; width: 80%; height: 100%; position: relative; $card_width: 400px; $card_height: 300px; $card_offset: 250px; .sg-swiper-container { transition: 0.382s ease; border-radius: 8px; width: $card_width; height: $card_height; opacity: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; font-size: 100px; font-weight: bold; color: white; z-index: 0; position: absolute; margin: auto; top: 0; left: calc((100% - #{$card_width}) / 2); bottom: 0; transform: scale(0); background-color: #409eff; &[position="0"] { left: calc((100% - #{$card_width}) / 2 - #{$card_offset * 1.3}); opacity: 0.5; z-index: 1; transform: scale(0.5); pointer-events: auto; } &[position="1"] { left: calc((100% - #{$card_width}) / 2 - #{$card_offset * 0.8}); opacity: 0.8; z-index: 2; transform: scale(0.8); pointer-events: auto; } &[position="2"] { opacity: 1; z-index: 3; transform: scale(1); pointer-events: auto; } &[position="3"] { left: calc((100% - #{$card_width}) / 2 + #{$card_offset * 0.8}); opacity: 0.8; z-index: 2; transform: scale(0.8); pointer-events: auto; } &[position="4"] { left: calc((100% - #{$card_width}) / 2 + #{$card_offset * 1.3}); opacity: 0.5; z-index: 1; transform: scale(0.5); pointer-events: auto; } } } .sg-swiper-btns { position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: flex; justify-content: space-between; align-items: center; user-select: none; z-index: 0; & > * { border-radius: 100%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #409eff; font-weight: bold; background-color: white; box-sizing: border-box; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border: 1px solid #eee; transition: 0.382s ease; cursor: pointer; transition: 0.382s ease; &:hover { transform: scale(1.1); } } } } } </style>