vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue js图片切换

vue+js点击箭头实现图片切换

作者:anshengsuiyeu

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

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

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

代码如下

 <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>

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

您可能感兴趣的文章:
阅读全文