vue+js點選箭頭實現圖片切換
阿新 • • 發佈:2021-06-28
本文例項為大家分享了+點選箭頭實現圖片切換的具體程式碼,供大家參考,具體內容如下
前端需求是 返回的圖片資料能夠點選箭頭切換
程式碼如下
<div class="pubuItemsBox"> <!-- 修改部分5.23晚 --> <template v-for="(orderEvent,index) in orderEventList" > <div :class="{'pubuItem':true,'noMag':(index+1)%3 == 0}"> <div class="imgDivs"> <template v-if="orderEvent.eventFocuspic.split(',').length > 1"> <ins class="left" @click='change(index,"prev")'></ins> etTaoFoy <ins class="right" @click='change(index,"next")'></ins> </template> <ul class="ulZpImg"> <template v-for="(imgUrl,imgUrlIndex) in orderEvent.eventFocuspic.split(',')" > <li v-show='imgUrlIndex===orderEvent.mark'><img :src="getImageUrl(showImg(imgUrl))"></li> </template> </ul> </div> <div class="txtBox"> <span>{{orderEvent.brandName}}</span><ins>檔期:{{orderEvent.beginDate}}至{{orderEvent.endDate}}</ins> </div> <p style="-webkit-box-orient: vertical;">{{orderEvent.eventDesc}}</p> </div> </template> &letTaoFoyt;/div> <script> change(i,type){ var obj = this.orderEventList[i]; var imgLength =obj.eventFocuspic.split(',').length; if (type === "prev") { if (obj.mark == 0) { obj.mark = imgLength - 1 www.cppcns.comreturn } obj.mark--; } if (type === "next") { if (obj.mark == imgLength - 1) { obj.mark = 0 return } console.log(objwww.cppcns.com.mark) obj.mark++; } } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。