vue实现轮播图 （淡入淡出效果 无插件）

使用vue做轮播图，不使用插件，纯原生

效果展示

轮播图淡入淡出效果

<template>
  <div id="app" >
      <div class="SwiperBox" @touchstart.prevent="touchstart">
          <!-- 图片 -->
          <img :class="['imgCss',ShowImg==index?'ShowCss':'']"
          :src="item.imgUrl" v-for="(item,index) in imgList" :key="index" />
          <!-- 左箭头按钮 -->
          <!-- <div class="leftBtn" @click="throttle(PrevFun)">&larr;</div> -->
          <!-- 右箭头按钮 -->
          <!-- <div class="rightBtn" @click="throttle(NextFun)">&rarr;</div> -->
          <!-- 下方指示点容器 -->
          <!-- <div class="instBox">
            <div v-for="(item,index) in imgList.length" :key="index"
            @click="ShowImg=index" :class="['inst',ShowImg==index?'instActv':'']">
            </div>
          </div> -->
      </div>
  </div>
</template>
<script>
  export default {
    components: {},
    data() {
      return {
        imgList: [
          {imgUrl: require('../assets/boring.jpg')},
          {imgUrl: require('../assets/QQ.jpg')},
          {imgUrl: require('../assets/img.jpg')},
          {imgUrl: require('../assets/1.jpg')},
          {imgUrl: require('../assets/2.jpg')},
          {imgUrl: require('../assets/3.jpg')},
          {imgUrl: require('../assets/4.jpg')},
          {imgUrl: require('../assets/5.jpg')},
          {imgUrl: require('../assets/6.jpg')},
          {imgUrl: require('../assets/7.jpg')},
          {imgUrl: require('../assets/8.jpg')},
          {imgUrl: require('../assets/9.jpg')},
          {imgUrl: require('../assets/10.jpg')},
          {imgUrl: require('../assets/11.jpg')},
          {imgUrl: require('../assets/12.jpg')},
          {imgUrl: require('../assets/13.jpg')},
          {imgUrl: require('../assets/14.jpg')},
          {imgUrl: require('../assets/15.jpg')},
          {imgUrl: require('../assets/16.jpg')},
          {imgUrl: require('../assets/17.jpg')},
          {imgUrl: require('../assets/18.jpg')},
          {imgUrl: require('../assets/19.jpg')},
          {imgUrl: require('../assets/20.jpg')},
          {imgUrl: require('../assets/21.jpg')},
          {imgUrl: require('../assets/22.jpg')},
          {imgUrl: require('../assets/23.jpg')},
          {imgUrl: require('../assets/24.jpg')},
          {imgUrl: require('../assets/25.jpg')},
          {imgUrl: require('../assets/26.jpg')},
          {imgUrl: require('../assets/27.jpg')},
          {imgUrl: require('../assets/28.jpg')},
          {imgUrl: require('../assets/29.jpg')},
          {imgUrl: require('../assets/30.jpg')},
          {imgUrl: require('../assets/31.jpg')},
          {imgUrl: require('../assets/32.jpg')},
          {imgUrl: require('../assets/33.jpg')},
          {imgUrl: require('../assets/34.jpg')},
        ],
        ShowImg:0,  // 表示当前显示的图片
        flag:true, // 用来节流防止重复点击
        start:null, // 自动执行下一张定时器
      };
    },
    mounted() {
      this.setTimeoFun()
    },
    methods: {
      // 这里定义一个鼠标移入移出事件，鼠标悬停时停止自动轮播，鼠标移出则重新执行自动轮播
     /*  MouseFun(type){ */// 停止定时器            // 重新执行定时器
        /* type=='移入'?clearTimeout(this.start):this.setTimeoFun()
      }, */
      touchstart(e) {
      this.$router.push({path:'/index' }) 
       
      },
      setTimeoFun(){
          this.start = setInterval(()=>{
          this.NextFun()
        },8000)
      },
      // 这里通过额外封装的节流函数触发 PrevFun() 和 NextFun(),以达到防止重复点击的效果
      throttle(fun) {
      	if (this.flag) {
      		this.flag = false;
      		fun(); // 此为模板中传递进来的PrevFun()或NextFun()函数
      	  setTimeout(() => {
      			this.flag = true;
      		}, 3000); // 节流间隔时间
      	}
      },
      // 上一张
      PrevFun(){
        if(this.ShowImg!==0){
           this.ShowImg--
        }else{
           this.ShowImg=this.imgList.length-1
        }
      },
      // 下一张
      NextFun(){
        if(this.ShowImg!==this.imgList.length-1){
           this.ShowImg++
        }else{
           this.ShowImg=0
        }
      },
    }
  };
</script>
<style>
   /* 图片容器样式 */
  .SwiperBox {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;
  }
  /* 图片默认样式 */
  .imgCss {
    position: absolute;
    left: 0px;
    top: 0px;
    object-fit: cover; /* 保持原有尺寸比例。内容被缩放。 */
    width: 100%;
   height: 100%; 
    opacity: 0;
    transition: 3s;  /* 淡入淡出过渡时间 */
  }
  /* 图片选中样式(继承上方默认样式) */
  .ShowCss {
    opacity: 1;
  }
   /* 两个按钮共有的样式,也可直接使用箭头图片替代 */
  .leftBtn,
  .rightBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(109, 109, 109, 0.445);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
  }
  .leftBtn {
    left: 10px;
  }
  .rightBtn {
    right: 10px;
  }
  /* 下方指示器盒子 */
  .instBox{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    display: flex;
  }
   /* 小圆点 */
  .inst{
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    margin-right: 8px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
  .inst:last-child{
    margin-right: 0px;
  }
  .instActv{
    border: 1px solid #3f51ec;
    background:#3f51ec;
  }
  #app{
    width: 100%;
    height:100%;
    /* padding: 120px; */
    /* display: flex; */
    justify-content: center;
  }
</style>