旨在提供一种思路，我这里给了四个item，宽度也是在css写死的。要作为组件使用的话，各个item的宽度、top值、left值都是需要使用js计算的，好了，废话不多说直接上代码，上面都有注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.slider-3d {
position: relative;
width: 900px;
margin: 50px auto;
}
.slider-item {
position: absolute;
box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.6);
/* 开启cubic-bezier（3d版贝塞尔曲线），纵享丝滑 */
transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.slider-item.left {
width: 250px;
/* top: 150px;
left: 0; */
z-index: 2;
opacity: 0.7;
/* 这里用transform并不是为了避免触发浏览器重绘，上面宽度、高度都可能变了，已经触发了重排 */
/* 是为了使用translate3d调用GPU加速 */
transform: translate3d(0, 150px, 0);
}
.slider-item.center {
width: 500px;
/* top: 80px;
left: 200px; */
z-index: 3;
transform: translate3d(200px, 80px, 0);
}
.slider-item.right {
width: 250px;
/* top: 150px;
right: 0; */
z-index: 2;
opacity: 0.7;
transform: translate3d(650px, 150px, 0);
}
.slider-item.top {
width: 300px;
/* left: 300px; */
z-index: 1;
opacity: 0.5;
transform: translate3d(300px, 0, 0);
}
img {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="slider-3d">
<div class="slider-item center" data-index="0">
<img src="./assets/img/1.jpg" alt="" />
</div>
<div class="slider-item right" data-index="1">
<img src="./assets/img/2.jpg" alt="" />
</div>
<div class="slider-item top" data-index="2">
<img src="./assets/img/3.jpg" alt="" />
</div>
<div class="slider-item left" data-index="3">
<img src="./assets/img/4.png" alt="" />
</div>
</div>
</div>
</body>
<script>
const sliderList = document.querySelectorAll('.slider-item'),
oClassNames = []
let t = null
function getClassNames() {
for (let i = 0; i < sliderList.length; i++) {
oClassNames.push(sliderList[i].className)
}
}
// 添加图片的鼠标移入事件
function handleHoverItem() {
for (let i = 0; i < sliderList.length; i++) {
sliderList[i].addEventListener('mouseenter', e => {
stop()
console.log(e)
console.log(e.target.dataset.index)
console.log(oClassNames)
// 当前项是中间位置
if (e.target.className === 'slider-item center') {
return
}
// 开始换位
for (let i = 0; i < oClassNames.length; i++) {
oClassNames.unshift(oClassNames.pop())
if (oClassNames[e.target.dataset.index] === 'slider-item center') {
break
}
}
console.log(oClassNames)
// 重新赋值类名
setClass()
// 移出重新开始轮播
sliderList[i].addEventListener('mouseleave', e => {
// 先停止再开始，防止setInterval计时累加
stop()
run()
})
})
}
}
function setClassName() {
// 转换，把每个slider-item类名往后进一位
oClassNames.unshift(oClassNames.pop())
setClass()
}
// 重新赋值类名
function setClass() {
for (let i = 0; i < sliderList.length; i++) {
sliderList[i].className = oClassNames[i]
}
}
function run() {
t = setInterval(() => {
setClassName()
}, 3000)
}
function stop() {
clearInterval(t)
t = null
}
function init() {
getClassNames()
handleHoverItem()
run()
}
init()
</script>
</html>
效果预览：
QQ录屏20220421233532
