vue轮播如何实现无缝衔接

问题遇到的现象和发生背景

我将图片导入到数组中,然后在轮播时修改数组,将轮过去的图片放删除后添加到数组的最后,但是不能实现无缝衔接,具体情况无法用语言描述,我放上代码你们预览一下就知道了,而且轮播也有些问题,每次的移动距离总会差点,一块帮我解决了吧

代码

<template>
  
  <div id="kuang_jia" data-v-app>
    <div id="img" :style="StyleKuang">
      <div id="imgContainer" ref="divImage">
        <img v-for="(item, index) in imgList.array" :key="index" :src="item" alt="">
      div>
      <div class="zuo_you">
        <span class="zuo" @click="zuo">
          <
        span>
        <span class="you" @click="you">
            >
        span>
      div>
      
    div>
  div>
template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import one from '../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg'
import tow from '../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg'
import three from '../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg'
import four from '../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg'
import five from '../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg'
import six from '../../image/9477156de6d94c49c505a9dfce8e8c17.jpg'
import seven from '../../image/c52be335098658931847fa0ecbcf7d03.jpeg'
import eight from '../../image/d86d80e8573ab91914a6e9ad5217c785.jpg'
import nine from '../../image/e305fca1a381bda8482d8b3296da61f6.jpg'
import ten from '../../image/fa983053c19cf3c7b27491507799e02e.jpeg'

const imgList = reactive({ array: [] })
imgList.array = [one, tow, three, four, five, six, seven, eight, nine, ten]
const divImage = ref(null)
// 获取标签属性
const StyleKuang = ref()
const StyleImg = ref()
const StyleImg1 = ref()
const countChu = ref()

onMounted(() => {
  countChu.value = 1
  StyleImg.value = {
    width: (5 * 40 + 5 * 200) + 'px'
  }
  const countWei = divImage.value.childElementCount
  StyleImg1.value = {
    width: (countWei * 40 + countWei * 200) + 'px'
  }
  setInterval(() => {
    divImage.value.style.transform = 'translateX(' + ((-240) * countChu.value) + 'px)'
    const width = (-240) * countChu.value
    divImage.value.style.transform = 'translateX(' + width + 'px)'
    divImage.value.style.transitionDuration = '1s'
    countChu.value++
    const array = imgList.array.splice(0, 1)
    imgList.array.push(array[0])
    console.log(imgList.array)
  }, 3000)
})
script>

<style scoped>
#kuang_jia {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 300px;
  margin: 20px;
  border: azure 3px solid;
}

#img {
  width: 1230px;
  height: 340px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

#img div {
  width: 2400px;
  height: 340px;
  position: relative;
  background-color: bisque;
}

.zuo_you {
  position: absolute !important;
  width: 1200px !important;
  background-color: transparent !important;
  top: 0;
  left: 0;
}

/* 设置顶层显示,并且上下居中 */
.zuo, .you {
  font-size: 50px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: aqua;
}

.zuo {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}

.you {
  position: absolute !important;
  top: 50%;
  right: -3%;
  transform: translateY(-50%);
}

/*  扩展:!important(Css属性) */
/* 用法: https://www.runoob.com/css/css-important.html */
style>

图片你们就做几个div代替吧

https://www.swiper.com.cn/demo/index.html
一个插件库，看有你想要的效果没

以下内容引用CHATGPT、有用望采纳：

问题描述：
提问者在使用Vue实现图片轮播时，想要实现无缝衔接，但是目前的实现方式还存在问题，每次移动距离总会有些差别。

解决思路：

实现无缝衔接
可以通过在数组的前后各添加一张与最后一张图片相同的图片，这样在轮播到最后一张图片时，再切换到第一张图片时就会无缝衔接了。因为这时候实际上是轮播到了添加的那张图片，再接着切换到了第一张图片。
解决移动距离差别的问题
可以通过计算每次移动的距离，避免移动距离的差别。具体来说，可以根据轮播的次数来计算每次移动的距离，这样每次移动的距离就是固定的了。

代码实现：

实现无缝衔接
将数组的第一张图片复制一份添加到数组的末尾，将数组的最后一张图片复制一份添加到数组的开头。修改后的代码如下：

const newList = imgList.array.slice() // 复制数组
newList.unshift(imgList.array[imgList.array.length - 1]) // 在数组开头添加最后一张图片的复制
newList.push(imgList.array[0]) // 在数组末尾添加第一张图片的复制
imgList.array = newList

解决移动距离差别的问题
在轮播时，根据轮播的次数计算每次移动的距离，代码如下：

let countChu = 1 // 轮播的次数
const itemWidth = 240 // 每个图片的宽度
const moveDistance = itemWidth * countChu // 每次移动的距离
divImage.value.style.transform = `translateX(${-moveDistance}px)` // 移动图片
countChu++ // 增加轮播的次数

完整代码如下：

<template>
  <div id="kuang_jia" data-v-app>
    <div id="img" :style="styleKuang">
      <div id="imgContainer" ref="divImage">
        <img v-for="(item, index) in imgList.array" :key="index" :src="item" alt="">
      </div>
      <div class="zuo_you">
        <span class="zuo" @click="zuo">
          &lt;
        </span>
        <span class="you" @click="you">
            &gt;
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import one from '../../image/0a96e2a01593e9c8ce9ff190b1957172.jpg'
import tow from '../../image/0b2f6c5e2a7ea37e1f6cc2dd2d38f2f1.jpg'
import three from '../../image/1ac1c7bf66c43e0cd3ca51699c5206ba.jpeg'
import four from '../../image/5fec7cd428d3edd59870cf23c7c4149f.jpeg'
import five from '../../image/33dcfaedf645b04a7ded7e3a64b897ff.jpg'
import six from '../../image/9477156de6d94c49c505a9dfce8e8c17.jpg'
import seven from '../../image/c52be335098658931847fa0ecbcf7d03.jpeg'
import eight from '../../image/d86d80e8573ab91914a6e9ad5217c785.jpg'
import nine from '../../image/e305fca1a381bda8482d8b3296da61f6.jpg'
import ten from '../../image/fa983053c19cf3c7b27491507799e02e.jpeg'

const imgList = reactive({ array: [] })
imgList.array = [one, tow, three, four, five, six, seven, eight, nine, ten]
const divImage = ref(null)

const styleKuang = {
  width: '1230px',
  height: '340px',
  margin: '0 auto',
  overflow: 'hidden',
  position: 'relative'
}

onMounted(() => {
  const newList = imgList.array.slice() // 复制数组
  newList.unshift(imgList.array[imgList.array.length - 1]) // 在数组开头添加最后一张图片的复制
  newList.push(imgList.array[0]) // 在数组末尾添加第一张图片的复制
  imgList.array = newList

  let countChu = 1 // 轮播的次数
  const itemWidth = 240 // 每个图片的宽度
  setInterval(() => {
    const moveDistance = itemWidth * countChu // 每次移动的距离
    divImage.value.style.transform = `translateX(${-moveDistance}px)` // 移动图片
    divImage.value.style.transitionDuration = '1s'
    countChu++ // 增加轮播的次数
    const array = imgList.array.splice(0, 1)
    imgList.array.push(array[0])
  }, 3000)
})
</script>

<style scoped>
#kuang_jia {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

img {
  width: 200px;
  height: 300px;
  margin: 20px;
  border: azure 3px solid;
}

#img {
  background-color: bisque;
}

#imgContainer {
  position: relative;
  width: 2400px;
  height: 340px;
}

.zuo_you {
  position: absolute !important;
  width: 1200px !important;
  background-color: transparent !important;
  top: 0;
  left: 0;
}

.zuo, .you {
  font-size: 50px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 50px;
  color: aqua;
}

.zuo {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
}

.you {
  position: absolute !important;
  top: 50%;
  right: -3%;
  transform: translateY(-50%);
}
</style>

你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7750076
这篇博客也不错, 你可以看下vue H5文本框定位到某个固定位置,背景全屏,适应所有屏幕(div大小变化时,背景与内容相对位置不改变)
除此之外, 这篇博客: Vue注册组件的几种方式,你都知道吗?中的 在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
- 您还可以看一下徐照兴老师的Vue全家桶从基础入门到进阶项目实战第三篇中级进阶实战篇课程中的什么是单页面应用及实现前端路由的基本原理小节, 巩固相关知识点