当前位置：首页 > VUE

vue实现图片的滚动

2026-02-21 00:38:39VUE

Vue实现图片滚动的几种方法

使用CSS动画实现横向滚动

通过CSS的@keyframes和transform属性实现无限滚动效果，适用于静态图片列表。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <img v-for="(img, index) in images" :key="index" :src="img" />
    </div>
  </div>
</template>

<style>
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
}
.scroll-content {
  display: inline-block;
  animation: scroll 20s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
</style>

使用Vue的定时器和动态样式

通过JavaScript定时修改transform或marginLeft实现可控滚动，适合需要交互控制的场景。

export default {
  data() {
    return {
      images: ['img1.jpg', 'img2.jpg', 'img3.jpg'],
      currentPosition: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.currentPosition -= 1
      if (Math.abs(this.currentPosition) >= this.$el.offsetWidth) {
        this.currentPosition = 0
      }
    }, 20)
  }
}

使用第三方库（如Swiper）

Swiper.js提供丰富的轮播图功能，支持触摸滑动、分页器等高级特性。

import Swiper from 'swiper'
import 'swiper/css/swiper.css'

export default {
  mounted() {
    new Swiper('.swiper-container', {
      loop: true,
      autoplay: {
        delay: 3000,
      },
    })
  }
}

使用Vue专用轮播组件

例如vue-awesome-swiper封装了Swiper的功能，提供更Vue-friendly的API。

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        autoplay: 2500,
        direction: 'vertical'
      }
    }
  }
}

响应式滚动实现

结合resize事件监听，动态计算滚动速度和容器宽度。

vue实现图片的滚动

export default {
  methods: {
    handleResize() {
      this.containerWidth = this.$el.offsetWidth
    }
  },
  created() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  }
}