Vue2.0 走马灯（非swiper实例）

最新推荐文章于 2024-07-12 10:00:20 发布

迷阵

最新推荐文章于 2024-07-12 10:00:20 发布

阅读量914

点赞数

分类专栏： vue 文章标签： vue 走马灯 swiper

本文链接：https://blog.csdn.net/weixin_43047070/article/details/103158318

版权

vue 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

例子

https://www.swiper.com.cn/demo/web/index.html（下拉到最后一个）

Vue中安装

main.js中引用

不需要

页面中使用

样式及html太长了，先不放了，例子里面可以下载

<template>
  <ul class="principal-swiper">
      <li v-for="item in HeadmasterStarList" :key="item.id">
            <img :src="'http://xusheng.manyunad.com'+item.image">
      </li>
  </ul>
<template>
import anime from "animejs/lib/anime.es.js";
export default {
  name: "Index",
   mounted() {
    // this.$nextTick(_ => {
    //   this.settingEl = this.$refs.principal; //<div class="hot-wrap">..</div>
    //   this.docEl = document;
    // });
    let xTrans = [];
    anime.set(".principal-swiper", {
      translateX: function(el, i, l) {
        xTrans[i] = { x: i * 100 };
        return i * 100;
      }
    });

    anime({
      targets: xTrans,
      duration: 6000, //走一周持续时间
      easing: "linear",
      x: "+=200",
      loop: true,
      update: function(anim) {
        anime.set(".principal-swiper", {
          translateX: function(el, i, l) {
            return xTrans[i].x % 600;
          }
        });
      }
    });
  }
}