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="(imgU
  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
假设你有三张图片,分别为 `img1.jpg`、`img2.jpg` 和 `img3.jpg`,并且有两个按钮 `prev` 和 `next`,点击这两个按钮可以切换这三张图片。你可以使用 Vue 3 的组件实现如下: HTML: ```html <template> <div> <button @click="prev">上一张</button> <button @click="next">下一张</button> <div class="images" ref="images"> <img v-for="(img, index) in imgList" :key="index" :src="img" /> </div> </div> </template> ``` CSS: ```css .images { display: flex; flex-wrap: nowrap; overflow-x: hidden; } .images img { flex-shrink: 0; width: 100%; } ``` JavaScript: ```javascript import { ref } from "vue"; export default { setup() { const imgList = ["img1.jpg", "img2.jpg", "img3.jpg"]; const imgCount = imgList.length; const currentIndex = ref(0); const images = ref(null); function prev() { currentIndex.value = (currentIndex.value - 1 + imgCount) % imgCount; images.value.style.transform = `translateX(${-currentIndex.value * 100}%)`; } function next() { currentIndex.value = (currentIndex.value + 1) % imgCount; images.value.style.transform = `translateX(${-currentIndex.value * 100}%)`; } return { imgList, currentIndex, prev, next, images, }; }, }; ``` 首先,使用 `import` 命令导入 Vue 3 的 `ref` 函数。然后,在组件的 `setup` 函数中,定义一个数组 `imgList` 来存储图片的路径,以及一个整数 `imgCount` 来记录图片的数量。使用 `ref` 函数定义一个响应式变量 `currentIndex` 来记录当前显示的图片的索引,初始值为 `0`。使用 `ref` 函数定义一个响应式变量 `images` 来引用图片容器的 DOM 元素。定义两个函数 `prev` 和 `next` 分别用于处理上一张和下一张按钮的点击事件。当上一张按钮被点击时,将 `currentIndex` 减 `1`,如果 `currentIndex` 小于 `0`,则将其加上图片数量,然后根据 `currentIndex` 来计算图片容器的 `transform` 属性的值,从而实现向左滑动的效果。当下一张按钮被点击时,将 `currentIndex` 加 `1`,并根据 `currentIndex` 来计算图片容器的 `transform` 属性的值,从而实现向右滑动的效果。注意,在计算 `currentIndex` 时,使用了取模运算,这样可以实现循环切换图片的效果。最后,将 `imgList`、`currentIndex`、`prev`、`next` 和 `images` 等变量和函数暴露给模板系统。在模板中,使用 `v-for` 指令和 `img` 元素来循环渲染图片,使用 `ref` 指令来引用图片容器的 DOM 元素。另外,使用了 CSS3 的 Flexbox 布局来实现图片容器的自适应布局和水平滑动效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值