vue 轮播图

<template>
  <div class="lunbobox">
    <div class="lunbo">
      <!-- 四张轮播图 宽960高375-->
      <transition-group tag="ul" name="image">
        <li v-for="(img,index) in imgARrray" v-show="index===mark" key="index">
          <a href="#" >
            <img :src="img">
          </a>
        </li>
      </transition-group>
    </div>
    <div class="bar">
      <span
        v-for="(item,index) in imgARrray"
        :class="{'active':index===mark}"
        @click="change(index)"
        :key="index"
      ></span>
    </div>
  </div>
</template>
<script>
import { setInterval } from "timers";
import { clearInterval } from "timers";
export default {
  data() {
    return {
      timer: null, //定时器
      mark: 0, //比对图片索引的变量
      imgARrray: [
        "/static/shouye/banner1.png",
        "/static/shouye/banner_01.png",
        "/static/shouye/lunbo3.png",
        "/static/shouye/lunbo4.png"
      ]
    };
  },
  methods: {
    autoPlay() {
      this.mark++;
      if (this.mark === 4) {
        //遍历到最后一张图片置零
        this.mark = 0;
      }
    },
    play() {
      setInterval(this.autoPlay, 2500);
    },
    change(i) {
      this.mark = i;
    },
    stop() {
      clearInterval(this.timer);
    },
    move() {
      this.timer = setInterval(this.autoPlay, 2500);
    }
  },
  created() {
    this.play();
  }
};
</script>
<style lang='scss'>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lunbobox {
  //轮播总容器开始的大括号
  widows: 100%;
  height: 375px;
  margin-top: -16px;
//   屏幕宽度小于520的时候top=-32px
  overflow: hidden;
  position: relative;
  z-index: -2;
  .lunbo {
    //轮播图片小容器开始的大括号
    widows: 100%;
    height: 375px;
    // 轮播图的过渡样式的开始
    
.image-enter-active {
    transform: translateX(0);
    transition: all 1.5s ease;
  }
    .image-leave-active {
      transform: translateX(-100%);
      transition: all 1.5s ease;
    }
    .image-enter {
      transform: translateX(100%);
    }
    .image-leave {
      transform: translateX(0);
    }
    // 轮播图的过渡样式的结束

    li {
      //轮播图片li开始的大括号
      position: absolute;
    //   width: 100%;
      min-width: 100%;
    height: 375px;
      .image-enter-active {
        transform: translateX(0);
        transition: all 1.5s ease;
      }

      img {
        //轮播图片开始的大括号
        width: 100%;
        // height: 100%;
      } //轮播图片结束的大括号
    } //轮播li结束的大括号
  } //轮播图片小容器结束的大括号
  .bar {
    //轮播底部 圈圈的开始
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
    span{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: white;
        margin-right: 10px;
    }
    .active {
      background: #ffffff !important;
    }
  } //轮播底部 圈圈的结束
} //轮播总容器开始的大括号的结束
<template>
  <div class="lunbobox">
    <div class="lunbo">
      <!-- 四张轮播图 宽960高375-->
      <transition-group tag="ul" name="image">
        <li v-for="(img,index) in imgARrray" v-show="index===mark" key="index">
          <a href="#" >
            <img :src="img">
          </a>
        </li>
      </transition-group>
    </div>
    <div class="bar">
      <span
        v-for="(item,index) in imgARrray"
        :class="{'active':index===mark}"
        @click="change(index)"
        :key="index"
      ></span>
    </div>
  </div>
</template>
<script>
import { setInterval } from "timers";
import { clearInterval } from "timers";
export default {
  data() {
    return {
      timer: null, //定时器
      mark: 0, //比对图片索引的变量
      imgARrray: [
        "/static/shouye/banner1.png",
        "/static/shouye/banner_01.png",
        "/static/shouye/lunbo3.png",
        "/static/shouye/lunbo4.png"
      ]
    };
  },
  methods: {
    autoPlay() {
      this.mark++;
      if (this.mark === 4) {
        //遍历到最后一张图片置零
        this.mark = 0;
      }
    },
    play() {
      setInterval(this.autoPlay, 2500);
    },
    change(i) {
      this.mark = i;
    },
    stop() {
      clearInterval(this.timer);
    },
    move() {
      this.timer = setInterval(this.autoPlay, 2500);
    }
  },
  created() {
    this.play();
  }
};
</script>
<style lang='scss'>

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lunbobox {
  //轮播总容器开始的大括号
  widows: 100%;
  height: 375px;
  margin-top: -16px;
//   屏幕宽度小于520的时候top=-32px
  overflow: hidden;
  position: relative;
  z-index: -2;
  .lunbo {
    //轮播图片小容器开始的大括号
    widows: 100%;
    height: 375px;
    // 轮播图的过渡样式的开始
    
.image-enter-active {
    transform: translateX(0);
    transition: all 1.5s ease;
  }
    .image-leave-active {
      transform: translateX(-100%);
      transition: all 1.5s ease;
    }
    .image-enter {
      transform: translateX(100%);
    }
    .image-leave {
      transform: translateX(0);
    }
    // 轮播图的过渡样式的结束

    li {
      //轮播图片li开始的大括号
      position: absolute;
    //   width: 100%;
      min-width: 100%;
    height: 375px;
      .image-enter-active {
        transform: translateX(0);
        transition: all 1.5s ease;
      }

      img {
        //轮播图片开始的大括号
        width: 100%;
        // height: 100%;
      } //轮播图片结束的大括号
    } //轮播li结束的大括号
  } //轮播图片小容器结束的大括号
  .bar {
    //轮播底部 圈圈的开始
    position: absolute;
    width: 100%;
    bottom: 10px;
    margin: 0 auto;
    z-index: 10;
    text-align: center;
    span{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: white;
        margin-right: 10px;
    }
    .active {
      background: #ffffff !important;
    }
  } //轮播底部 圈圈的结束
} //轮播总容器开始的大括号的结束
@media screen and (max-width:520px){
 .lunbobox {
   margin-top:-32px;
  }
}
</style>
</style>