轮播图

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

一。轮播图

轮播图要求：每隔5秒变化一次，进入页面的时候开启轮播图，鼠标移入的时候关闭轮播图，鼠标移出开启轮播图，点击小圆点的时候图片变化，且对应小圆点的背景颜色也发生变化

1.页面样式

  <style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul {
    display: flex;
    position: absolute;
    top: 390px;
    left: 540px;
  }
  li {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #eee;
    margin: 0 10px;
  }
  .active {
    background-color: crimson;
  }
</style>

2.页面布局

:src="image[index]" 图片地址等于图片数组下标里的值

@mouseenter="menter" 鼠标进入事件

@mouseleave="mleave" 鼠标离开事件

 <div class="root">
  <img :src="image[index]" @mouseenter="menter" @mouseleave="mleave" />
  <ul>
    <!-- :class="i==index? 'active':''"  i就是数组的下标，当i等于index的时候创建active类名 -->
    <li
      v-for="(item,i) in image"
      :class="i==index? 'active':''"
      @click="clicks(i)"
    ></li>
  </ul>
</div>
<script src="./js/vue.js"></script>

3.使用vue

 <script>
  Vue.config.productionTip = false;
  let vm = new Vue({
    el: ".root",
    data: {
      // 定义索引
      index: 0,
      //   定义一个定时器变量
      timer: null,
      //   图片数组
      image: [
        "http://p1.music.126.net/k1_WGj2Z_Yn-H_f6vAPPOQ==/109951167714911555.jpg?imageView&quality=89",
        "http://p1.music.126.net/-LN9VGGkBi1cv4gi_Xs_2g==/109951167714890291.jpg?imageView&quality=89",
        "http://p1.music.126.net/PcW1Wt-s68X46ogu1mffZw==/109951167715794916.jpg?imageView&quality=89",
        "http://p1.music.126.net/NCVWdpsyvbNb7WO0iLxUtA==/109951167714203675.jpg?imageView&quality=89",
      ],
    },

    methods: {
      // 开启轮播图函数
      load() {
        this.timer = setInterval(() => {
          this.index++;
          //   如果index的值>=数组的长度，就令index值为0
          if (this.index >= this.image.length) {
            this.index = 0;
          }
        }, 5000);
      },
      //   鼠标移入事件
      menter() {
        //   关闭定时器
        console.log("关闭轮播图");
        clearInterval(this.timer);
      },
      //   鼠标移除事件
      mleave() {
        console.log("开启轮播图");
        this.load();
      },
      clicks(i) {
        console.log(`这是第${i}张图片`);
        //令index的值等于索引i，可以切换成image数组中的对应图片，且对应的小圆点也会跟着变亮
        this.index = i;
      },
    },
    // 挂载完成
    mounted() {
      // 页面挂载完成的时候调用开启轮播图函数
      this.load();
    },
  });
</script>

鼠标移入

鼠标移出

点击小圆点