最近公司有这个需求, 但是网上找了一圈 , 没有合适的能用在vue3里面的、且长这样的组件,
干脆自己动手写了一个;
效果如下, 可以适配多张图片 ,小于五张会是平铺展示; 大于五张按顺序轮播 , 每次切换有动画
<template><div class="Swiper"><div v-if="pageData.showSwiper" class="Swiper-content"><divclass="Swiper-item"v-for="(item, index) in pageData.imageUrl":key="index"><img :src="item" alt="" /></div></div><div v-else class="lessThanFiveDiv"><imgclass="lessThanFiveImg"v-for="(item, index) in pageData.imageUrl":key="index":src="item"/></div></div>
</template><script setup>
import { ref, reactive, nextTick, defineExpose } from "vue";const pageData = reactive({allData: [],imageUrl: [],showSwiper: false,startIndex: 0,
});const classList = ref(["one", "two", "three", "four", "five"]);function getNextArray(arr) {const length = arr.length;const result = [];for (let i = 0; i < 5; i++) {result.push(arr[(pageData.startIndex + i) % length]);}pageData.startIndex = (pageData.startIndex + 1) % length;return result;
}function compareArrays(arr1, arr2) {return JSON.stringify(arr1) === JSON.stringify(arr2);
}const setData = (data) => {if (compareArrays(data, pageData.allData)) return;pageData.allData = data;pageData.startIndex = 0;pageData.showSwiper = data.length >= 5;pageData.imageUrl = pageData.showSwiper ? getNextArray(data) : data;if (pageData.showSwiper) {nextTick(() => {createSwiper({SwiperContent: ".Swiper-content",classList: classList.value,});});}
};defineExpose({setData,
});function createSwiper(options) {const swiper = {$options: options,SwiperContent: null,classList: [],__init() {this.SwiperContent = document.querySelector(this.$options.SwiperContent).children;this.classList = this.$options.classList;this.__move();},__move() {pageData.imageUrl = getNextArray(pageData.allData);[...this.SwiperContent].forEach((item, index) => {item.setAttribute("class", this.classList[index]);});},__leftMove() {this.classList.unshift(this.classList.pop());this.__move();},__timers() {setInterval(() => {this.__leftMove();}, 3000);},start() {this.__init();this.__timers();},};swiper.start();return swiper;
}
</script><style scoped>
.titelText {position: absolute;font-size: 50px;width: 100%;top: 20px;text-align: center;font-family: "YouYuan";letter-spacing: 8px;color: white;text-shadow: 0 0 0px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00ffea,0 0 20px #00ffd5, 0 0 30px #00eeff, 0 0 40px #00ffff, 0 0 50px #00fff2;
}
.bottomm {height: 100%;width: 100%;position: absolute;bottom: 0;background-image: url("../assets/image/11.png");left: 0;right: 0;background-size: 100%;background-repeat: no-repeat;border-top: 30px solid rgba(20, 20, 20, 0.5);box-shadow: 0 0 10px rgb(255, 243, 187);
}
.Swiper {height: 96%;width: 100%;position: relative;margin: 0px auto;
}.Swiper-content {height: 100%;width: 100%;position: relative;margin: 0 auto;left: 15px;
}.Swiper-content div {position: absolute;height: 100%;width: 25%;/* margin-top: 50px; */transition: all 0.6s;
}
.Swiper-content img {height: 100%;width: 100%;
}
.one {z-index: 1;transform: scale(0.8);left: 2%;box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.two {z-index: 2;transform: scale(0.9);left: 15%;box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}.three {z-index: 9;transform: scale(1);left: 34%;box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.four {z-index: 2;transform: scale(0.9);left: 53%;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}.five {z-index: 1;transform: scale(0.8);left: 65%;box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}.lessThanFiveDiv {display: flex;height: 100%;justify-content: center;
}
.lessThanFiveImg {flex: 1;margin-right: 10px;height: 100%;max-width: 20%;min-width: 20%;display: block;
}
</style>
