Vue轮播图

html

      <div class="box" id="box" v-for="(r,i) in arr" ::key="r.id">
        <img
          :src="r.pic"
          v-show="r.id === picIndex"
          @mouseover="change3(true)"
          @mouseleave="change3(false)"
        />
        <div class="btn btn_l" @click="change1('up')">&lt;</div>
        <div class="btn btn_r" @click="change1('down')">&gt;</div>
        <div class="banner-circle">
          <ul>
            <li
              @click="change2(item.id)"
              v-for="(item) in arr"
              :key="item.id"
              :class="item.id===picIndex? 'active': '' "
            ></li>
          </ul>
        </div>
      </div>
    </div>

css

      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .box {
        width: 500px;
        height: 300px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

      img {
        width: 500px;
        height: 300px;
      }

      .btn,
      .points {
        position: absolute;
        cursor: pointer;
      }

      .btn {
        width: 20px;
        height: 40px;
        background: green;
        color: white;
        font-size: 20px;
        text-align: center;
        line-height: 40px;
        top: 50%;
        margin-top: -20px;
        z-index: 999;
      }

      .btn_l {
        left: 0;
      }

      .btn_r {
        right: 0;
      }
      /* 控制圆点 */
      .banner-circle {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 20px;
      }
      .banner-circle ul {
        margin: 0 50px;
        height: 100%;
        text-align: right;
      }
      .banner-circle ul li {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin: 0 5px;
        border-radius: 7px;
        background-color: rgba(125, 125, 125, 0.8);
        cursor: pointer;
      }
      .active {
        background-color: black !important;
      }
    </style>

js

<script>
    new Vue({
      el: "#app",
      data() {
        return {
          picIndex: 0, //图片索引号初始位置
          timer: null,
          arr: [
            {
              id: 0,
              pic: "./img/b1.png",
            },
            {
              id: 1,
              pic: "./img/b2.png",
            },
            {
              id: 2,
              pic: "./img/b3.png",
            },
            {
              id: 3,
              pic: "./img/b4.png",
            },
          ],
        };
      },
      methods: {
        // 定时器
        startInterval() {
          clearInterval(this.timer);
          this.timer = setInterval(() => {
            this.picIndex++;
            if (this.picIndex > this.arr.length - 1) {
              this.picIndex = 0;
            }
          }, 2000);
        },
        // 左右切换事件
        change1(val) {
          if (val === "down") {
            this.picIndex++;
            console.log(this.picIndex);
            if (this.picIndex === this.arr.length) {
              this.picIndex = 0;
            }
          } else {
            this.picIndex--;
            console.log(this.picIndex);
            if (this.picIndex < 0) {
              this.picIndex = this.arr.length - 1;
            }
          }
        },
        // 点击控制小圆点
        change2(e) {
          this.picIndex = index;
        },
        // 鼠标移入移出
        change3(e) {
          if (e) {
            clearInterval(this.timer);
          } else {
            this.startInterval();
          }
        },
      },
      // 开启
      mounted() {
        this.startInterval();
      },
    });
  </script>