用vue.js实现大图滚动

<template>
  <div class="scroll-container" ref="scrollContainer">
    <div class="scroll-content" :style="{ transform: `translateX(${scrollPosition}px)` }">
      <img v-for="(image, index) in images" :key="index" :src="image" alt="Scrolling Image" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'path/to/image1.jpg',
        'path/to/image2.jpg',
        // ...更多图片路径
      ],
      scrollPosition: 0,
      scrollSpeed: 1, // 滚动速度
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        const containerWidth = this.$refs.scrollContainer.offsetWidth;
        const contentWidth = this.$refs.scrollContainer.querySelector('.scroll-content').offsetWidth;
        if (Math.abs(this.scrollPosition) >= contentWidth) {
          this.scrollPosition = containerWidth;
        }
      }, 20); // 每20毫秒滚动一次
    },
  },
};
</script>

<style>
.scroll-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.scroll-content {
  display: flex;
  transition: transform 0.1s linear;
}
</style>