vue3 图片轮播效果实现：仿 fortnite.gg 风格
本文介绍如何在vue3中实现类似Fortnite.gg商城页面图片自动切换的轮播效果，尤其针对商品图片数量不定的情况。
需求分析
目标是创建一个Vue3组件，能够自动轮播商品图片。每个商品可能拥有数量不等的图片，组件需要灵活适应。 我们希望实现平滑的图片切换动画。
实现方案
我们将采用css动画和z-index属性来控制图片的显示和切换。 通过改变z-index值，实现图片层级的变化，并配合CSS动画，达到流畅的过渡效果。
代码示例
以下代码片段展示了组件的核心逻辑：
立即学习“前端免费学习笔记（深入）”；
<template> <div class="shop-card" v-for="item in items" :key="item.id"> <div class="image-container"> @@##@@ </div> <div class="item-info-container"> <p class="item-name">{{ item.name }}</p> <p class="item-price">@@##@@{{item.price}}</p> </div> </div> </template> <script> export default { data() { return { currentIndex: 0, }; }, mounted() { setInterval(() => { this.currentIndex = (this.currentIndex + 1) % this.item.images.length; }, 3000); // 每3秒切换一次 }, }; </script> <style scoped> .image-container { position: relative; width: 200px; /* 调整图片容器宽度 */ height: 150px; /* 调整图片容器高度 */ overflow: hidden; } .item-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease-in-out; /* 添加平滑过渡动画 */ } .item-image.active { opacity: 1; z-index: 1; /* 设置当前显示图片的 z-index */ } </style>
这段代码利用v-for循环渲染每张图片，并使用:class=”{ active: currentIndex === index }”绑定类名来控制图片的显示状态。 :style=”{ zIndex: index }” 确保图片按照顺序叠加，currentIndex变量控制当前显示的图片索引，setInterval函数实现自动切换。 CSS样式确保图片填充容器并添加平滑过渡动画。
此方法避免了复杂的遮罩动画，通过简单的CSS和Vue3特性实现了图片轮播效果，并能有效适应不同数量的商品图片。 您可以根据实际需求调整图片容器尺寸和动画时长。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
