vue实现一个定时无缝滚动的轮播图并且左右有按钮能控制左右滑动鼠标悬停会停止滚动 鼠标移开 能继续滚动

以下是一个基于Vue的定时无缝滚动轮播图组件的示例，包括左右滑动按钮和鼠标悬停暂停功能。

<template>
  <div class="carousel">
    <div class="carousel-inner" :style="{ transform: 'translateX(' + offset + 'px)' }">
      <div class="carousel-item" v-for="(item, index) in items" :key="index">
        <img :src="item.image" alt="">
      </div>
    </div>
    <nav class="carousel-nav">
      <button class="carousel-nav-prev" @click="prev"><</button>
      <button class="carousel-nav-next" @click="next">></button>
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { image: 'https://picsum.photos/id/1018/800/400' },
        { image: 'https://picsum.photos/id/1015/800/400' },
        { image: 'https://picsum.photos/id/1019/800/400' },
        { image: 'https://picsum.photos/id/1020/800/400' },
        { image: 'https://picsum.photos/id/1021/800/400' }
      ],
      offset: 0,
      interval: null,
      hover: false,
      duration: 5000
    }
  },
  methods: {
    start() {
      this.stop()
      this.interval = setInterval(() => {
        this.next()
      }, this.duration)
    },
    stop() {
      clearInterval(this.interval)
    },
    prev() {
      this.stop()
      this.offset += this.itemWidth()
      if (this.offset > 0) {
        this.offset = -this.items.length * this.itemWidth() + this.itemWidth()
      }
    },
    next() {
      this.stop()
      this.offset -= this.itemWidth()
      if (this.offset < -this.items.length * this.itemWidth()) {
        this.offset = -this.itemWidth()
      }
    },
    itemWidth() {
      return this.$el.querySelector('.carousel-item').offsetWidth
    }
  },
  mounted() {
    this.start()
  },
  watch: {
    hover(value) {
      if (value) {
        this.stop()
      } else {
        this.start()
      }
    }
  }
}
</script>

<style>
.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 400px;
}

.carousel-inner {
  display: flex;
  width: max-content;
  transition: transform 0.3s ease-in-out;
}

.carousel-item {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

.carousel-nav button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  outline: none;
}

.carousel-nav-prev {
  margin-left: 20px;
}

.carousel-nav-next {
  margin-right: 20px;
}
</style>

在上述代码中，我们定义了一个名为Carousel的Vue组件。它的模板中包含了一个轮播图容器.carousel，一个轮播图内部容器.carousel-inner，和左右滑动按钮.carousel-nav-prev和.carousel-nav-next。

组件的数据包括了图片项items、偏移量offset、定时器interval、鼠标悬停状态hover和动画持续时间duration。其中，偏移量offset表示轮播图容器应该向左偏移多少像素，以展示下一张图片。定时器interval用于定时自动滚动轮播图。鼠标悬停状态hover用于控制鼠标悬停时是否暂停轮播图。

组件的方法包括了开始滚动start、停止滚动stop、向前滑动prev、向后滑动next和获取图片项宽度itemWidth。其中，开始滚动start方法会启动定时器interval，定时向后滑动轮播图。停止滚动stop方法会清除定时器interval。向前滑动prev方法会将偏移量offset增加一个图片项宽度，以向前滑动轮播图。如果偏移量offset超出了左边界，则将其重置为最右边的图片项位置。向后滑动next方法同理，只是将偏移量offset减少一个图片项宽度，并在右边界处重置。获取图片项宽度itemWidth方法会查询第一个图片项的宽度，并返回该值。

组件的挂载方法mounted会在组件挂载后启动自动滚动。组件的监视方法watch会监听鼠标悬停状态hover的变化，如果鼠标悬停，则停止自动滚动，否则重新开始自动滚动。

在组件的样式中，我们对轮播图容器.carousel进行了定位和溢出隐藏，对轮播图内部容器.carousel-inner进行了flex布局和过渡动画，对轮播图项.carousel-item进行了flex缩放和溢出隐藏，并对图片进行了尺寸控制。对左右滑动按钮.carousel-nav-prev和.carousel-nav-next进行了定位和样式设置。