vue轮播图组件，自动播放，小圆点或按钮进行切换

前端路上迷茫的小鲨鱼

已于 2022-06-10 10:24:44 修改

阅读量853

点赞数 2

分类专栏： uniapp vue js 文章标签： vue.js javascript 前端

于 2022-06-10 10:22:30 首次发布

本文链接：https://blog.csdn.net/Guoyu1_/article/details/125203834

版权

默认自动播放，进入轮播图片或按钮取消播放，按钮以及圆点进行切换图片

<style lang="scss" scoped>
.banner {
  width: 260px;
  margin-left: 20px;
  overflow: hidden;
  border: 1px solid red;

  .list {
    width: 2000%;
    margin-top: 28px;
    text-align: left;
    overflow: hidden;
    position: relative;
    .item {
      display: inline-block;
      vertical-align: middle;
      width: 230px;
      height: 100px;
      padding-right: 30px;

      .item-img {
        width: 100%;
        height: 100%;
        cursor: pointer;
        border: 1px solid #ccc;

        .img {
          display: block;
          width: 100%;
          height: 100%;
          border: 1px solid #ccc;
        }
      }
    }
  }

  .warp-dots{
    text-align: center;
    .dots-item{
      display: inline-block;
      width: 5px;
      height: 5px;
      margin: 0 2px;
      background-color: #000;
      border-radius: 50%;
      cursor: pointer;
      &.active{
       background-color: #19b9e7;
      }
    }
  }
}
</style>

<template>
  <div
    class="banner"
    ref="bannerRef"
    @mouseenter="bannerEnter"
    @mouseleave="bannerLeave">
    <ul class="list" ref="listRef" :style="listStyle">