实例:
实现大于三张图片时,点击箭头图片切换,并有箭头置灰不可操作。
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;
}
}
}
}
}