vue中實現簡單切換圖片效果
阿新 • • 發佈:2019-01-08
例項:
實現大於三張圖片時,點選箭頭圖片切換,並有箭頭置灰不可操作。
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; } } } } }