vue图片轮播滚动（animejs）

javascript 复制代码
<template>
  <div class="case-hzhb">
    <div class="title">{{ title }}</div>
    <div class="case-hzhb-content">
      <div></div>
      <div></div>
      <div class="wrapper">
        <div class="boxes">
          <div v-for="(item, index) in boxList" :key="index" class="box">
            <img :src="getImageUrl(item)" alt="" />
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="boxes">
          <div v-for="(item, index) in boxList2" :key="index" class="box2">
            <img :src="getImageUrl(item)" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, defineProps } from 'vue'
  import anime from 'animejs'

  let props = defineProps({
    //
    title: {
      type: String,
      default: '客户信赖的合作伙伴',
    },
  })

  const boxList = ref([
    'cooperate-img1.png',
    'cooperate-img2.png',
    'cooperate-img7.png', //
    'cooperate-img4.png',
    'cooperate-img5.png',
    'cooperate-img6.png',
    'cooperate-img7.png',
    'cooperate-img8.png',
    'cooperate-img9.png',
    'cooperate-img10.png',
    'cooperate-img11.png',
  ])
  const boxList2 = ref([
    'cooperate-img12.png',
    'cooperate-img13.png',
    'cooperate-img14.png',
    'cooperate-img15.png',
    'cooperate-img16.png',
    'cooperate-img17.png',
    'cooperate-img18.png',
    'cooperate-img19.png',
    'cooperate-img20.png',
    'cooperate-img21.png',
    'cooperate-img22.png',
  ])

  const animeFu = (boxClass = '.box', dir = 'right', duration = 24000) => {
    let xTrans = []
    let xT = 260
    anime.set(boxClass, {
      translateX: function (el, i, l) {
        xTrans[i] = { x: i * xT }
        return i * xT
      },
    })

    let x = 260 * xTrans.length
    anime({
      targets: xTrans,
      duration: duration, //走一周持续时间
      easing: 'linear',
      x: dir === 'right' ? `+=${x}` : `-=${x}`,
      loop: true,
      update: function () {
        anime.set(boxClass, {
          translateX: function (el, i, l) {
            return dir === 'right' ? xTrans[i].x % x : (xTrans[i].x + x) % x
          },
        })
      },
    })
  }

  const getImageUrl = (url) => {
    return new URL(`../assets/image/partners/${url}`, import.meta.url).href
  }
  onMounted(() => {
    animeFu('.box', 'right')
    animeFu('.box2', 'left')
  })
</script>

<style lang="scss" scoped>
  .case-hzhb {
    width: 100%;
    > .title {
      font-size: 40px;
      font-weight: bold;
      color: #202531;
      margin: 0 auto;
      text-align: center;
      padding-top: 20px !important;
    }
    &-content {
      position: relative;
      max-width: 2560px;
      height: 280px;
      margin: 50px auto 40px;
      // border: 1px solid;
      > div:nth-child(1) {
        position: absolute;
        left: 0;
        z-index: 1;
        width: 64px;
        height: 280px;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }
      > div:nth-child(2) {
        position: absolute;
        right: 0;
        z-index: 1;
        width: 64px;
        height: 280px;
        background: linear-gradient(
          to left,
          rgba(255, 255, 255, 1),
          rgba(255, 255, 255, 0)
        );
      }

      .wrapper {
        width: 100%;
        height: 100px;
        position: relative;
        margin: 30px auto 0;
        // background: #ccc;
        overflow: hidden;
        .boxes {
          position: relative;
          left: -200px;
          .box,
          .box2 {
            width: 240px;
            height: 96px;
            background-color: #ffffff;
            // border: solid 2px #f7f7f9;
            position: absolute;
            > img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>