纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

anshengsuiyeu   2021-06-25 我要评论
想了解vue+js点击箭头实现图片切换的相关内容吗,anshengsuiyeu在本文为您仔细讲解vue js图片切换的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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>

相关文章

猜您喜欢

  • python ansible自动化运维 python ansible自动化运维工具执行流程

    想了解python ansible自动化运维工具执行流程的相关内容吗,珂儿吖在本文为您仔细讲解python ansible自动化运维的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python,ansible自动化运维,python,ansible自动化运维工具,下面大家一起来学习吧。..
  • vue卡片式点击切换图片组件 vue卡片式点击切换图片组件使用详解

    想了解vue卡片式点击切换图片组件使用详解的相关内容吗,结城在本文为您仔细讲解vue卡片式点击切换图片组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue卡片式点击切换图片组件,vue点击切换图片组件,vue点击切换图片,下面大家一起来学习吧。..

网友评论

Copyright 2020 www.systonsoft.com 【赛顿软件】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式