vue3用js+css实现轮播图(可调整堆叠程度)

先看效果

html

 <div
        class="outer"
        style="
          width: 650px;

          background: #fff;
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
          border-radius: 15px;
          margin: 0 10px 15px 5px;
        "
      >
      //这里用的是svg-icon,需要的可自行替换为其他图片
        <svg-icon
          id="btn_l"
          class="iconfont"
          style="cursor: pointer"
          v-show="imgList.length > 1"
          name="goleft"
        ></svg-icon>

        <svg-icon
          id="btn_r"
          class="iconfont"
          style="cursor: pointer"
          @click="frount()"
          v-show="imgList.length > 1"
          name="goright"
        ></svg-icon>
        <div class="wrapper" @mouseover="appMouseover()" @mouseout="appMouseout()">
          <!-- <el-carousel height="300px;" >
          <el-carousel-item v-for="(item, index) in imgList"  :key="index">
        
            <el-image style="width: 100%" :src="item.url" :fit="'fill'" />
          </el-carousel-item>
        </el-carousel> -->
          <div
            class="divImg"
            v-for="(item, index) in imgList"
            :style="appIsHover && current == index ? appStyle : ''"
          >
            <img @click="appJump(item, index)" class="image" :src="item.url" />
            <span class="appName" @click="appJump(item, index)">{{ item.name }}</span>
          </div>
        </div>
      </div>

js

//图片列表
const imgList = ref([
  {
    name: '',
    url: new URL('@/assets/banner3.png', import.meta.url).href
  },
  {
    name: '',
    url: new URL('@/assets/banner.png', import.meta.url).href
  },
  {
    name: '',
    url: new URL('@/assets/banner2.png', import.meta.url).href
  }
])



const appStyle = 'width:330px!important;height:220px!important'
//鼠标悬浮时清除自动滚动,2秒后恢复
const appMouseover = (item, index) => {
  clearInterval(timer)
}
const appMouseout = (item, index) => {
  if (timer2) {
    clearTimeout(timer2)
  }
  timer2 = setTimeout(() => {
    autoplay()
  }, 2000)
}
//点击后直接跳到对应的图片
const appJump = (item, index) => {
  if (current == index) {
  }
  clearInterval(timer)
  if (timer2) {
    clearTimeout(timer2)
  }
  timer2 = setTimeout(() => {
    autoplay()
  }, 2000)
  current = index
  frount()
}

const appJump = (item, index) => {
  if (current == index) {
  }
  clearInterval(timer)
  if (timer2) {
    clearTimeout(timer2)
  }
  timer2 = setTimeout(() => {
    autoplay()
  }, 2000)
  current = index
  frount()
}










var imgs = document.getElementsByClassName('divImg')
var len = imgs.length
var current = 0

var timer
var timer2
//页面初始调用
function wrapper() {
  imgs = document.getElementsByClassName('divImg')
  len = imgs.length
  current = 0

  if (len != 0) {
    frount()
    bind()
  }
  autoplay()
}
 wrapper()
//点击图片跳转主要方法
function frount() {
  var mlen = Math.floor(len / 2)
  var limg, rimg
  for (var i = 0; i < mlen; i++) {
    limg = len + current - i - 1
    rimg = current + i + 1
    if (limg >= len) {
      limg -= len
    }
    if (rimg >= len) {
      rimg -= len
    }
   // 这里70为叠加度,可自行调整
    imgs[limg].style.transform =
      `translateX(` + -70 * (i + 1) + `px) translateZ(` + (200 - i * 100) + `px) rotateY(30deg)`
    imgs[rimg].style.transform =
      `translateX(` + 70 * (i + 1) + `px) translateZ(` + (200 - i * 100) + `px) rotateY(-30deg)`
  }
  imgs[current].style.transform = `translateZ(300px)`
}
//给左右箭头添加点击效果
function bind() {
  // for (var i = 0; i < len; i++) {
  //     (function (i) {
  //         imgs[i].onclick = function () {
  //             current = i;
  //             frount();
  //         }
  //     })(i);
  // }
  var btn_l = document.getElementById('btn_l')
  var btn_r = document.getElementById('btn_r')
  btn_l.onclick = function () {
    clearInterval(timer)
    if (timer2) {
      clearTimeout(timer2)
    }
    timer2 = setTimeout(() => {
      autoplay()
    }, 2000)
    if (current <= 0) {
      current = len - 1
    } else {
      current--
    }
    frount()
  }
  btn_r.onclick = function () {
    clearInterval(timer)
    if (timer2) {
      clearTimeout(timer2)
    }
    timer2 = setTimeout(() => {
      autoplay()
    }, 2000)

    if (current >= len - 1) {
      current = 0
    } else {
      current++
    }
    frount()
  }
}
//自动播放
function autoplay() {
  timer = setInterval(function () {
    if (current >= len - 1) {
      current = 0
    } else {
      current++
    }
    frount()
  }, 2000)
}

css

.wrapper .divImg {
  float: left;
  width: 300px;
  height: 150px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 8px;
  transition: transform 1s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out;
  cursor: pointer;
}
.wrapper .image {
  width: 100%;
  height: 100%;
}
.wrapper .appName {
  display: inline-block;
  position: absolute;
  bottom: 4px;
  width: 100px;
  font-size: 15px;
  color: #3fe2ff;
  text-align: center;
  left: calc(50% - 50px);
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: none;
  perspective: 800px;
  transform-style: preserve-3d;
}
#btn_r {
  position: absolute;
  right: 30px;
  top: 48%;
  // background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 30px;

  height: 30px;
  z-index: 999; 
}
.outer {
  color: #fff;
  position: relative;
}
#btn_l {
  position: absolute;
  left: 30px;
  top: 48%;
  // background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  width: 30px;
  //  opacity: 0.5;
  height: 30px;

  z-index: 99999999999;
}