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

青旅半醒 2022-05-23 01:44 275阅读 0赞

实例：

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

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;
    				}
    			}
    		}
    	}
    }