vue+js點擊箭頭實現(xiàn)圖片切換
更新時間:2021年06月25日 08:54:07 作者:anshengsuiyeu
這篇文章主要為大家詳細介紹了vue+js點擊箭頭實現(xiàn)圖片切換,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue+js點擊箭頭實現(xiàn)圖片切換的具體代碼,供大家參考,具體內(nèi)容如下

前端需求是 返回的圖片數(shù)據(jù)能夠點擊箭頭切換
代碼如下
<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>
<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>
</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
return
}
obj.mark--;
}
if (type === "next") {
if (obj.mark == imgLength - 1) {
obj.mark = 0
return
}
console.log(obj.mark)
obj.mark++;
}
}
</script>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue3+TypeScript實現(xiàn)PDF預覽組件
這篇文章主要為大家詳細介紹了如何基于Vue3+TypeScript實現(xiàn)PDF預覽組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
vue3中實現(xiàn)拖拽排序代碼示例(vue-draggable-next的使用)
在Vue3中使用拖拽功能時應選用vue-draggable-next插件,傳統(tǒng)的draggable插件不兼容Vue3,可能導致TypeError錯誤,安裝后,需在項目中引入并使用,具體步驟包括安裝插件、引入使用、查看效果和相關說明,需要的朋友可以參考下2024-09-09
Vue2實現(xiàn)未登錄攔截頁面功能的基本步驟和示例代碼
在Vue 2中實現(xiàn)未登錄攔截頁面功能,通常可以通過路由守衛(wèi)和全局前置守衛(wèi)來完成,以下是一個基本的實現(xiàn)步驟和示例代碼,幫助你創(chuàng)建一個簡單的未登錄攔截邏輯,需要的朋友可以參考下2024-04-04
使用electron-builder將項目打包成桌面程序的詳細教程
這篇文章主要介紹了使用electron-builder把web端的項目打包生成桌面程序,并可安裝程序,文中通過代碼示例和圖文結合的方式給大家介紹的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-08-08

