vue中实现简单切换图片效果

最新推荐文章于 2024-09-23 18:28:58 发布

github_39598787

最新推荐文章于 2024-09-23 18:28:58 发布

阅读量1.9w

点赞数

文章标签： vue 实现简单切换图片效果

本文链接：https://blog.csdn.net/github_39598787/article/details/80514508

版权

本文介绍如何在Vue项目中实现一个功能，当存在多于三张图片时，通过点击箭头图标来切换图片，并在切换过程中动态改变箭头的样式以反映其可用状态。

摘要由CSDN通过智能技术生成

实例：

实现大于三张图片时，点击箭头图片切换，并有箭头置灰不可操作。

html

<div class="summary">
	<div class="gallery">
		<div class="product-img">
			<div @click="prevImg" class="prev-arrow" :class="{'prev-active': galleryList.length - 3 <= 0 || this.offsetCount < 1}">
				<img src="../assets/images/productDetail/left.png" alt="左箭头">
			</div>
			<ul>
				<li class="list-img">
					<div class="list-img-wrap" ref="carouser">
						<div @click="getCurImg(item.ImageCode, index)" v-for="(item,index) in galleryList" :key="index" class="single-img" :class="{'img-activce': item.ImageCode == curCode && imgActive}">
							<img :s

最低0.47元/天解锁文章