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

最新推荐文章于 2024-07-30 16:11:42 发布

anshengsuiyeu

最新推荐文章于 2024-07-30 16:11:42 发布

阅读量7.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/anshengsuiyeu/article/details/80656512

版权

本文介绍如何在前端开发中利用Vue.js和JavaScript实现点击左右箭头进行图片切换的效果，满足项目的实际需求。通过提供的代码示例，读者可以理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

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

代码如下

 <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="(imgU