js如何实现点击切换图片,js左右箭头图片切换

　　这篇文章主要为大家详细介绍了vue js点击箭头实现图片切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

　　本文实例为大家分享了vue js点击箭头实现图片切换的具体代码，供大家参考，具体内容如下

　　前端需求是返回的图片数据能够点击箭头切换

　　代码如下

　　div class=pubuItemsBox

　　！-修改部分5.23晚-

　　orderEventList中的模板v-for=(订单事件，索引)

　　div :class={pubuItem:true， noMag:(index 1)%3==0}

　　div class=imgDivs

　　模板v-if=顺序事件。eventfocuspic。拆分(，).长度1

　　ins class= left @ click= change(index， prev)/ins

　　ins class= right @ click= change(index， next)/ins

　　/模板

　　ul class=ulZpImg

　　orderEvent.eventFocuspic.split(，)中的模板v-for=(imgUrl，imgUrlIndex)

　　李v-show= imgUrlIndex===订单事件。mark img:src= getImageUrl(showImg(imgUrl))/Li

　　/模板

　　/ul

　　/div

　　div class=txtBox

　　span { {订单事件。品牌名称} }/span档期：{{orderEvent.beginDate}}至{{orderEvent.endDate}}/ins

　　/div

　　p style=-WebKit-box-orient:vertical；{{orderEvent.eventDesc}}/p

　　/div

　　/模板

　　/div

　　脚本

　　更改(我，类型){

　　var obj=this。ordereventlist[I]；

　　var imgLength=obj。eventfocuspic。拆分(，).长度；

　　if (type===prev) {

　　if (obj.mark==0) {

　　mark=imgLength - 1

　　返回

　　}

　　obj。马克-；

　　}

　　if (type===next) {

　　if (obj.mark==imgLength - 1) {

　　目标标记=0

　　返回

　　}

　　console.log(obj.mark)

　　马克；

　　}

　　}

　　/脚本

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。