javascript - Vue3如何实现像这个网站的图片自动切换效果?
Vue3如何实现像这个网站的图片自动切换效果
https://fortnite.gg/shop
这是我写的template
<div class="shop-section" v-for="(items,index) in shopStore.shopList" :key="items"> <h2 class="section-name">{{index}}</h2> <div :class="'shop-card ' + index" v-for="item in items" :style="{'height': index.includes('Jam Tracks') ? '200px' : 'none'}" @click="preview(item)"> <img class="item-img" v-for="img in item.image" v-lazy="img" alt="" :style="{'height': index.includes('Jam Tracks') ? '200px' : 'none'}"> <div class="item-info-container"> <p class="item-name">{{ item.name }}</p> <p class="item-price"><img style="width: 20px; vertical-align: middle;" src="@/assets/imgs/vbuck.png" alt="">{{item.price}}</p> </div> </div></div>查看了该网站的效果是设置了两个class="animation"的盒子来做链接切换并且调整高度,但是我的每个item的图片数量不确定,有的为1,有的为2,3个,实在想不出来应该怎么实现了,可以请教大佬们一下思路吗
共有1个答案
打开控制台inspect那个图片,看人家样式不就知道是 max-height 的过渡吗?
-
今天逛网站无意间看到一个有意思的图片轮播效果，就打算随手实现一下，没想到实现的效果总是不尽如人意，不知道哪里的问题 这是原样式 这是自己做的样式 贴下自己写的代码
-
本文向大家介绍基于javascript实现图片切换效果，包括了基于javascript实现图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现图片切换效果，供大家参考，具体内容如下 用js实现点击按钮，图片切换的效果： 结构：用一个固定宽高的div来做最外层的容器，设置overflow为hidden， 然后内层img_box设置宽度为四倍box的宽度，高度相同，也就是
-
本文向大家介绍简单实现JavaScript图片切换效果，包括了简单实现JavaScript图片切换效果的使用技巧和注意事项，需要的朋友参考一下 JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画（可理解为使动画停止），为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval()函数
-
本文向大家介绍jquery+css实现动感的图片切换效果，包括了jquery+css实现动感的图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery+css实现动感的图片切换效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： 基本思路：定义一个数组存放需要展示的图片，接着当单击图片时删除zoomIn类，添加fadeOutRight类，实现实图右
-
本文向大家介绍jsp图片效果大全（图像震动效果、闪烁效果、自动切换图像），包括了jsp图片效果大全（图像震动效果、闪烁效果、自动切换图像）的使用技巧和注意事项，需要的朋友参考一下 本文主要介绍jsp实现图像震动效果、闪烁效果、自动切换图像的资料,废话不多说了，具体代码如下： 1.当鼠标指针经过图像时图像震动效果 2.图片闪烁效果 3.自动切换图像 希望本文所述对你有所帮助，jsp图片效果大全（图像
-
本文向大家介绍基于javascript实现图片左右切换效果，包括了基于javascript实现图片左右切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例介绍了javascript实现图片左右切换效果的详细代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。