vue中实现简单切换图片效果-优快云博客

本文链接：https://blog.youkuaiyun.com/github_39598787/article/details/80514508

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例：

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

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 :src="item.ImageCode" alt="缩略图">
						</div>
					</div>
				</li>
			</ul>
	            <div @click="nextImg" class="next-arrow" :class="{'next-active': galleryList.length - 3 <= 0 || offsetCount >= galleryList.length - 3 }">
			        <img src="../assets/images/productDetail/right.png" alt="右箭头">
		       </div>
		</div>
	</div>
</div>

js:

data中-------> offsetCount: 0,

prevImg () {
	if (this.galleryList.length - 3 > 0) {
		if (this.offsetCount > 0) {
			this.offsetCount --;					
			this.$refs.carouser.style.left = '-' + (8.37 * this.offsetCount) + 'rem';					
		} else {
			return false
		}			
	} else {
		return false				
	}
},
nextImg () {
	if (this.galleryList.length - 3 > 0) {
		if (this.offsetCount < this.galleryList.length - 3) {
			this.offsetCount ++;					
			this.$refs.carouser.style.left = '-' + (8.37 * this.offsetCount) + 'rem';					
		} else {
			return false
		}			
	} else {
		return false				
	}
},

css:

.product-img {
	display: flex;
	justify-content: flex-start;
	.prev-arrow,
	.next-arrow{
		cursor: pointer;		
	}
	.prev-active,
	.next-active{
		cursor: not-allowed;
	}
	ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		justify-content: flex-start;
		.list-img {
			width: 25.11rem;
			height: 5.71rem;
			position: relative;  //最外层的宽度，父级定位
			overflow: hidden;						
			.list-img-wrap {
				position: absolute; //子级定位，dom操作偏移
				left: 0;
				top: 0;
				.single-img {
				    cursor: pointer;
					float: left;								
					width: 5.71rem;
					height: 5.71rem;
					margin: 0 1.33rem;							
					border: 1px solid #E5E5E5;	
				}
				.img-activce{
					border: 1px solid #C12022;
				}
			}
		}
	}
}