vue实现广告滚动效果

2026-01-22 04:59:54VUE

Vue实现广告滚动效果

横向滚动效果

使用CSS动画和Vue结合实现横向滚动广告：

<template>
  <div class="ad-container">
    <div class="ad-content" :style="{ animationDuration: duration + 's' }">
      <div v-for="(ad, index) in ads" :key="index" class="ad-item">
        <img :src="ad.image" :alt="ad.title">
        <p>{{ ad.title }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ads: [
        { image: 'ad1.jpg', title: '广告1' },
        { image: 'ad2.jpg', title: '广告2' },
        { image: 'ad3.jpg', title: '广告3' }
      ],
      duration: 10
    }
  }
}
</script>

<style scoped>
.ad-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.ad-content {
  display: inline-block;
  animation: scroll linear infinite;
}

.ad-item {
  display: inline-block;
  width: 200px;
  margin-right: 20px;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
</style>

纵向滚动效果

实现垂直方向滚动的广告栏：

<template>
  <div class="vertical-ad" @mouseenter="stopScroll" @mouseleave="startScroll">
    <ul ref="adList">
      <li v-for="(item, index) in ads" :key="index">
        {{ item.text }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ads: [
        { text: '广告内容1' },
        { text: '广告内容2' },
        { text: '广告内容3' }
      ],
      timer: null,
      currentIndex: 0
    }
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex >= this.ads.length) {
          this.currentIndex = 0;
        }
        this.$refs.adList.style.transform = `translateY(-${this.currentIndex * 30}px)`;
      }, 2000);
    },
    stopScroll() {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped>
.vertical-ad {
  height: 30px;
  overflow: hidden;
  position: relative;
}

ul {
  transition: transform 0.5s ease;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  height: 30px;
  line-height: 30px;
}
</style>

使用第三方组件

对于更复杂的需求，可以考虑使用现成的Vue轮播组件：

安装vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

实现自动轮播广告


<template>
<swiper :options="swiperOption">
 <swiper-slide v-for="(ad, index) in ads" :key="index">
   <img :src="ad.image" :alt="ad.title">
 </swiper-slide>
 <div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>

import { Swiper, SwiperSlide } from 'vue-awesome-swiper' import 'swiper/css/swiper.css'

export default { components: { Swiper, SwiperSlide }, data() { return { ads: [ { image: 'ad1.jpg', title: '广告1' }, { image: 'ad2.jpg', title: '广告2' }, { image: 'ad3.jpg', title: '广告3' } ], swiperOption: { autoplay: { delay: 2500, disableOnInteraction: false }, pagination: { el: '.swiper-pagination', clickable: true } } } } }

```

无缝循环滚动

实现无限循环的无缝滚动效果：

<template>
  <div class="seamless-ad" ref="container">
    <div class="ad-wrapper" ref="wrapper">
      <div v-for="(item, index) in ads" :key="index" class="ad-item">
        {{ item.text }}
      </div>
      <!-- 复制一份实现无缝效果 -->
      <div v-for="(item, index) in ads" :key="index + 'copy'" class="ad-item">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ads: [
        { text: '滚动广告1' },
        { text: '滚动广告2' },
        { text: '滚动广告3' }
      ],
      scrollSpeed: 1,
      animationFrame: null
    }
  },
  mounted() {
    this.startAnimation();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame);
  },
  methods: {
    startAnimation() {
      const wrapper = this.$refs.wrapper;
      const container = this.$refs.container;

      const animate = () => {
        wrapper.style.transform = `translateX(-${this.scrollSpeed}px)`;

        if (this.scrollSpeed > wrapper.scrollWidth / 2) {
          this.scrollSpeed = 0;
          wrapper.style.transform = 'translateX(0)';
        } else {
          this.scrollSpeed += 0.5;
        }

        this.animationFrame = requestAnimationFrame(animate);
      };

      animate();
    }
  }
}
</script>

<style scoped>
.seamless-ad {
  width: 100%;
  overflow: hidden;
}

.ad-wrapper {
  display: flex;
  white-space: nowrap;
  transition: transform 0.1s linear;
}

.ad-item {
  padding: 0 20px;
  flex-shrink: 0;
}
</style>

以上实现方式可根据实际需求进行调整，包括滚动速度、方向、动画效果等参数。对于更复杂的广告滚动效果，建议结合CSS动画和JavaScript控制来实现更灵活的效果。

vue实现广告滚动效果