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

先看效果

html

 <divclass="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-iconid="btn_l"class="iconfont"style="cursor: pointer"v-show="imgList.length > 1"name="goleft"></svg-icon><svg-iconid="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> --><divclass="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 = indexfrount()
}const appJump = (item, index) => {if (current == index) {}clearInterval(timer)if (timer2) {clearTimeout(timer2)}timer2 = setTimeout(() => {autoplay()}, 2000)current = indexfrount()
}var imgs = document.getElementsByClassName('divImg')
var len = imgs.length
var current = 0var timer
var timer2
//页面初始调用
function wrapper() {imgs = document.getElementsByClassName('divImg')len = imgs.lengthcurrent = 0if (len != 0) {frount()bind()}autoplay()
}wrapper()
//点击图片跳转主要方法
function frount() {var mlen = Math.floor(len / 2)var limg, rimgfor (var i = 0; i < mlen; i++) {limg = len + current - i - 1rimg = current + i + 1if (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;
}