vue广告展示，水平滚动效果，鼠标移入暂停，移出继续

image.png

    <div class="slider-container" @mouseenter="pause" @mouseleave="resume">
      <div class="slider" :class="{ paused: isPaused }">
        <img
          v-for="(img, index) in duplicatedImages"
          :key="index"
          :src="img"
          class="slider-item"
        />
      </div>
    </div>

  computed: {
   duplicatedImages() {
      return [...this.images, ...this.images];
    },
}

isPaused: false,
  images: [
        require("@/assets/images/zsk-banner.png"),
        require("@/assets/images/zsk-banner.png"),
        require("@/assets/images/zsk-banner.png"),
        require("@/assets/images/zsk-banner.png"),
        require("@/assets/images/zsk-banner.png"),
        require("@/assets/images/znt-banner.png"),
      ],

 pause() {
      this.isPaused = true;
    },
    resume() {
      this.isPaused = false;
    },

////滑动
.slider-container {
  cursor: pointer;
  margin-top:20px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.slider {
  display: inline-flex;
  animation: slide 20s linear infinite;
  white-space: nowrap;
}

.slider.paused {
  animation-play-state: paused;
}

.slider-item {
  width: 300px; /* 根据实际需要调整 */
  height: 200px;
  object-fit: cover;
  flex-shrink: 0;
  margin: 0 10px;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 优化性能 */
.slider {
  will-change: transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}