vue2的堆叠轮播图 (5张图 错开叠加,来回切换)

先上图:

这是一个js文件,需要在vue项目中引用这个,前提是你要下载swiper插件. 

export class Swiper {
  constructor(options) {
    this.$options = options;
    this.__init();
    this.__timers();
  }

  __init() {
    this.SwiperContent = document.querySelector(
      this.$options.SwiperContent
    ).children;
    this.classList = this.$options.classList;
    this.__move(this.classList);
  }

  __move(list) {
    [...this.SwiperContent].forEach((item, index) => {
      item.setAttribute("class", list[index]);
    });
  }

  __leftMove() {
    this.a = this.classList.pop();
    this.classList.unshift(this.a);
    this.__move(this.classList);
  }

  __timers() {
    setInterval(() => {
      this.__leftMove();
    }, 3000);
  }
}

下面是vue的组件中的代码:

<template>
  <div>
    <div class="titelText">失落的灵魂</div>
    <div class="bottomm"></div>
    <div class="Swiper">
      <div class="Swiper-content">
        <div class="Swiper-item" v-for="(item, index) in imageUrl" :key="index">
          <img :src="item" alt="" />
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper } from "../swiper/Swiper";
export default {
  name: "Swiper",
  data() {
    return {
      imageUrl: [
        "https://newstore.vynior.com/shiying1%402x.png",
        "https://newstore.vynior.com/shiying2.png",
        "https://newstore.vynior.com/shiying3.png",
        "https://newstore.vynior.com/shiying5.png",
        "https://newstore.vynior.com/shiying8%402x.png",
        "https://newstore.vynior.com/shiying4.png",
        "https://newstore.vynior.com/shiying7.png",
        "https://newstore.vynior.com/shiying6.png",
      ],
      classList: ["one", "two", "three", "four", "five",'six','seven','eit'],
    };
  },
  methods: {
    swiper() {
      new Swiper({
        classList: this.classList,
        SwiperContent: ".Swiper-content",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
  },

  mounted() {
    this.swiper();
  },
};
</script>


<style scoped>
.titelText {
  position: absolute;
  font-size: 50px;
  width: 100%;
  top: 20px;
  text-align: center;
  font-family: "YouYuan";
  letter-spacing: 8px;
  color: white;
  text-shadow: 0 0 0px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #00ffea,
    0 0 20px #00ffd5, 0 0 30px #00eeff, 0 0 40px #00ffff, 0 0 50px #00fff2;
}
.bottomm {
  height: 150px;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-image: url("../assets/image/11.png");
  left: 0;
  right: 0;
  background-size: 100%;
  background-repeat: no-repeat;
  border-top: 30px solid rgba(20, 20, 20, 0.5);
  box-shadow: 0 0 10px rgb(255, 243, 187);
}
.Swiper {
  height: 250px;
  width: 100%;
  position: relative;
  margin: 150px auto;
}

.Swiper-content {
  height: 100%;
  width: 50%;
  position: relative;
  margin: 0 auto;
  left: 15px;
}

.Swiper-content div {
  position: absolute;
  height: 150px;
  width: 120px;
  margin-top: 50px;
  transition: all 0.6s;
}
.Swiper-content img {
  /* height: 100%;
  width: 100%; */
}
.one {
  z-index: 1;
  transform: scale(0.8);
  left: -60px;
  box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.two {
  z-index: 2;
  transform: scale(0.9);
  left: 75px;
  box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}

.three {
  z-index: 9;
  transform: scale(1);
  left: 282px;
  box-shadow: -3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.four {
  z-index: 2;
  transform: scale(0.9);
  left: 599px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}

.five {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.six {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.seven {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}
.eit {
  z-index: 1;
  transform: scale(0.8);
  left: 835px;
  box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.2);
}

</style>

注释:原作者是五张图,我是八张图,把多的图调整left 隐藏到 后面; 正面就显示5张图,分别对应的是属性设置是 one.tow......

加字体的话,不要循环图片,单个写出,在图片后面写p标签就可以了.给出代码.(文字用来解释图片,一起循环)

希望对大家有帮助.有什么问题可以提出讨论..