vue 自动切换导航图

Posted 2021-03-18 25miao

1、做成一个组件：

srccomponentssolution.vue

<template>
  <div class="solutions">
    <div class="main_view">
      <h1 class="title">{{title}}</h1>
      <div class="solutions_swiper">
        <img src="../assets/imgs/direction.png" v-if="swiperIndex === 0" class="left" />
        <img
          src="../assets/imgs/direction_active2.png"
          class="left"
          v-else
          @click.stop="changeIndex(‘left‘)"
        />
        <img src="../assets/imgs/direction.png" v-if="swiperIndex === 2" class="right" />
        <img
          src="../assets/imgs/direction_active2.png"
          class="right"
          v-else
          @click.stop="changeIndex(‘right‘)"
        />
        <div class="swiper_all">
          <div class="swiper_content">
            <div class="swiper_container" id="swiper_container2">
              <img v-for="item in all" :key="item" :src="item" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    all: "",
    title: ""
  },
  data() {
    return {
      swiperIndex: 0,
        timer: ‘‘
    };
  },
  methods: {
    changeIndex(direction) {
      //console.log(‘autoClick开始‘)
      //console.log(this.swiperIndex)
      var length = this.all.length;
      var swiper = document.getElementById("swiper_container2");
      if (direction === "left") {
        if (this.swiperIndex > 0) {
          this.swiperIndex = this.swiperIndex - 1;
       
        }
          else if (this.swiperIndex==0) {
            direction ="right"
          }
      } else {
        if (this.swiperIndex < length - 1) {
          this.swiperIndex = this.swiperIndex + 1;

        }
       else if (this.swiperIndex>=length-1) {
          direction ="left";
          this.swiperIndex=0;
        }
      }
      var sum = -(303 * this.swiperIndex);
      swiper.style.left = sum + "px";
    }
  },
    mounted() {
        this.timer = setInterval(this.changeIndex, 5000);
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
};
</script>
<style scoped>
.swiper_all {
  background: url("../assets/imgs/cvs_phone.png") no-repeat center center;
}
</style>

2、其他vue文件中引用：

<template>
 <swiper title="特点" :all="all"></swiper>
</template>
<script>
import swiper from "../components/solution";
export default {
  components: { swiper },
  data() {
    return {
      swiperIndex: 0,
      all: [
        require("../assets/imgs/sxbl01.png"),
        require("../assets/imgs/sxbl02.png"),
        require("../assets/imgs/sxbl03.png")
      ]
    };
  },
  created() {
    
  },
  computed: {},
  methods: {}
};
</script>