代码块
<!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>
html, body{
height: 100%;
}
.carousel-wrap{
height: 100%;
width: 100%;
background: #ffffff;
perspective: 1000px;
height: 600px;
position: relative;
}
.img-item{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 400px;
width: 300px;
background-color: greenyellow;
border: 1px solid #ccc;
transition: transform 1000ms,opacity,1000ms;
}
</style>
</head>
<body>
<div class="carousel-wrap">
<div class="img-item">0</div>
<div class="img-item">1</div>
<div class="img-item">2</div>
<div class="img-item">3</div>
</div>
<script>
function initPicture (opacityNum,scaleNum,translateNum) {
let itemList = document.getElementsByClassName('img-item')
let len = itemList.length
for(let i = 0; i < len; i++){
itemList[i].style.transform = `scale(${1 - ((len - i - 1) * scaleNum)}) translateY(${-(len - i - 1) * translateNum}px)`
itemList[i].style.opacity = `${1 - ((len - i - 1) * opacityNum)}`
}
if (len < 2) return
setInterval(() => {
document.getElementsByClassName('carousel-wrap')[0].prepend(itemList[len - 1])
for(let j = 0; j < len; j++) {
itemList[j].style.transform = `scale(${1 - ((len - j - 1) * scaleNum)}) translateY(${-(len - j - 1) * translateNum}px)`
itemList[j].style.opacity = `${1 - ((len - j - 1) * opacityNum)}`
}
}, 2000)
}
initPicture(0.25,0.04,40)
</script>
</body>
</html>
效果图