vue简单的轮播图（适合我们这些新人）_vue轮播图上面的字-CSDN博客

本文链接：https://blog.csdn.net/weixin_43734545/article/details/103557221

vue简单的轮播图（适合我们这些新人）

<template>
  <div class="wrap">
    <!-- 图片 -->
    <div v-for="(item, index) in banner" v-show="index === indexes" :key="index" class="item">
      <img :src="item.img" @mouseenter="enter()" @mouseleave="leave()" />
    </div>
    <!-- 按钮 -->
    <button type="buttom" class="btn" id="goPre" @click="goPre">
      <span>&lt;</span>
    </button>
    <button type="buttom" class="btn" id="goNecex" @click="goNecex">
      <span>&gt;</span>
    </button>
    <!-- 点点 -->
    <div class="point">
      <span @click="point(index,item.id)" v-for="(item, index) in banner" :class="{ 'active':index === indexes }" :key="index"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: "El_banner",
  data() {
    return {
      indexes: 0, //比对图片索引的变量
      banner: [
        {
          id:0,img:"http://img.hb.aicdn.com/22ded455284aab361b8d2056e82f74a891a019704296a-PSraEB_fw658"
        },
        {
          id:1,img:"http://img.hb.aicdn.com/adeed7d28df6e776c2fa6032579c697381d1a82b7fe00-fwRqgn_fw658"
        },
        {
          id:2,img:"http://img.hb.aicdn.com/ab7f48509b3c0353017d9a85ef1d12400c9b2724540d4-p3zouo_fw658"
        },
        {
          id:3,img:"http://img.hb.aicdn.com/60f788fc2a846192f224b9e6d4904b30e54926211d3d67-ACFJ9G_fw658"
        },
        {
          id:4,img:"http://img.hb.aicdn.com/adbde61e4343dedd21e97ea7f22666825a8db7d077ffe-qn8Pjn_fw658"
        }
      ],
      tiem: null // 变量
    };
  },
  methods: {
    autoPlay() {
      this.indexes++;
      if (this.indexes === this.banner.length) {
        //当遍历到最后一张图片置零
        this.indexes = 0;
      }
    },
    tiemr() {
      // 定时器---3秒循环下一张
      this.tiem = setInterval(this.autoPlay, 3000);
    },
    enter() {
      // 鼠标移入事件
      // console.log('鼠标移入事件')
      clearInterval(this.tiem);
    },
    leave() {
      // 鼠标移出事件
      // console.log('鼠标移出事件')
      this.tiemr();
    },
    goPre() {
      // 左点击
      if (this.indexes == 0) {
        this.indexes = this.banner.length-1;
      } else {
        this.indexes--;
      }
    },
    goNecex() {
      // 右点击
      if (this.indexes < this.banner.length-1) {
        this.indexes++;
      } else {
        this.indexes = 0;
      }
    },
    point(index) {
      // 点点   点击小圆点时将圆点索引赋予图片索引
        this.indexes = index;
        this.item = 0;// 执行切换重新计算3秒
    }
  },
  created() {
    this.tiemr();
  }
};
</script> 

<style>
.wrap {
  width: 950px;
  height: 450px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
}
.item {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 100%;
}
/* 按钮的样式 */
.btn {
  width: 50px;
  height: 50px;
  position: absolute;
  border: none; /*去掉边框*/
  outline: 0 none; /*去掉按钮选中边框*/
  top: 50%;
  transform: translateY(-50%); /*垂直居中*/
  z-index: 999;
  opacity: 0.4; /*透明度*/
  cursor: pointer; /*变手指*/
  border-radius: 100%; /*变园*/
}
.btn span {
  font-size: 30px;
}
#goPre {
  left: 5px;
}
#goNecex {
  right: 5px;
}
.item.active {
  opacity: 1;
  z-index: 6;
}
/* 点的样式 */
.active {
  background-color: #f2ffee !important;
}
.point {
  width: 180px;
  bottom: 10px;
  z-index: 10;
  transition: all 1s; /*动画效果*/
  margin-top: -50px;
  margin-left: 700px;
}
.point span {
  width: 7px;
  height: 7px;
  border: 1px white solid;
  background-color: #615959;
  display: inline-block;
  margin-right: 10px;
  border-radius: 100%; /*变园*/
  margin-right: 20px;
  border-style: solid; /*圈圈*/
  border-width: 2px;
  cursor: pointer; /*变手指*/
}
</style>