走马灯

效果

代码

<template>
  <div class="contentall">
    <Vue3Marquee
      :direction="configdata.direction"
      :duration="configdata.duration"
      :delay="configdata.delay"
      :loop="configdata.loop"
      :gradient="configdata.gradient"
      :gradientColor="configdata.gradientColor"
      :gradientLength="configdata.gradientLength"
      :pause="configdata.pause"
      :pauseOnHover="configdata.pauseOnHover"
      :pauseOnClick="configdata.pauseOnClick"
      :clone="configdata.clone"
      :vertical="configdata.vertical"
      :animateOnOverflowOnly="configdata.animateOnOverflowOnly"
      @Complete="onComplete"
      @onLoopComplete="onLoopComplete"
      @onPause="onPause"
      @onResume="onResume"
      @onOverflowDetected="onOverflowDetected"
      @onOverflowCleared="onOverflowCleared"
    >
      <!-- <img :src="content.img" alt="" v-for="(content, index) in listdata" :key="index" class="item" /> -->
      <div class="item" v-for="(content, index) in listdata" :key="index">
        <img :src="content.img" alt="" />
      </div>
      <!-- 更多图片元素 -->
    </Vue3Marquee>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const configdata = ref({
  // 内容移动的方向
  direction: "normal",
  // 内容移动整个容器宽度所需的时间 单位秒
  duration: 40,
  // 动画开始前的延迟时间 单位秒
  delay: 1,
  // 跑马灯动画循环次数(0表示无限次循环)
  loop: 0,
  // 是否显示渐变遮罩
  gradient: false,
  // 渐变色RGB值
  gradientColor: [255, 255, 25],
  // 渐变覆盖容器边缘的长度
  gradientLength: "200px",
  // 控制是否暂停跑马灯
  pause: false,
  // 鼠标悬停的时候是否暂停跑马灯
  pauseOnHover: true,
  // 右键点击是否暂停跑马灯
  pauseOnClick: true,
  // 是否克隆内容以避免动画的空白
  clone: false,
  // 是否设置跑马灯为垂直方向
  vertical: false,
  // 只当内容溢出容器时才动画化
  animateOnOverflowOnly: false,
});
const listdata = ref([
  {
    img: "https://file.jsopy.com/IMAGES/avatar.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/commonavater.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/avatar.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/commonavater.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/avatar.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/commonavater.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/avatar.jpg",
  },
  {
    img: "https://file.jsopy.com/IMAGES/commonavater.jpg",
  },
]);
// 当有限循次数的跑马灯完成所有循环的时候触发
const onComplete = () => {
  console.log("onComplete");
};
// 每一次跑完循环的时候触发
const onLoopComplete = () => {
  console.log("onLoopComplete");
};
// 当跑马灯暂停的时候触发
const onPause = () => {
  console.log("onPause");
};
// 当跑马灯恢复的时候触发
const onResume = () => {
  console.log("onResume");
};
// 若设置了animateOnOverflowOnly，内容超出容器边界时触发。
const onOverflowDetected = () => {
  console.log("onOverflowDetected");
};
// 若设置了animateOnOverflowOnly，内容超出容器边界时触发。
const onOverflowCleared = () => {
  console.log("onOverflowCleared");
};
</script>

<style scoped lang="scss">
.contentall {
  width: 600px;
  height: 200px;
  margin: 0 auto;
  margin-top: 300px;
  .item {
    width: 200px;
    height: 200px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>