借鉴自时迁酱
css
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: radial-gradient(circle at top, #444, #000);
}
.main {
display: flex;
-webkit-box-reflect: below 13px linear-gradient(transparent 70%,rgba(0,0,0,0.2));
}
.box {
width: 900px;
height: 500px;
background-size: cover;
transition: all 0.5s;
}
.box img {
width: 900px;
height: 500px;
}
.main .content {
height: 500px;
}
.main .content ul {
display: flex;
height: 100%;
flex-direction: column;
justify-content: space-between;
}
.content ul li {
width: 150px;
height: 90px;
}
.content ul li:hover img {
opacity: 0;
transform: translateX(-150px);
}
.content li .current {
opacity: 0;
transform: translateX(-150px);
}
.content ul img {
width: 100%;
height: 100%;
transition: all 0.5s;
}
html
<div class="main">
<div class="box"></div>
<div class="content">
<ul>
<li><img src="./img/5-img/bg0.webp" alt="" /></li>
<li><img src="./img/5-img/bg1.webp" alt="" /></li>
<li><img src="./img/5-img/bg2.webp" alt="" /></li>
<li><img src="./img/5-img/bg3.webp" alt="" /></li>
<li><img src="./img/5-img/bg4.webp" alt="" /></li>
</ul>
</div>
</div>
javascript
var list = document.querySelectorAll(".main .content li");
var img = document.querySelectorAll('img');
var box = document.querySelector(".main .box");
var main = document.querySelector(".main");
var timer = null;
var num = 1;
box.style.backgroundImage = "url(./img/5-img/bg0.webp)";
function Reset() {
img.forEach((item,index) => img[index].className = '');
}
list.forEach((item, index) => {
item.addEventListener("mouseenter", function () {
Reset();
box.style.backgroundImage = "url(./img/5-img/bg" + index + ".webp)";
num = index + 1;
});
});
function Auto_Play() {
timer = setInterval(function () {
if (num > 4) {
num = 0;
}
Reset();
img[num].className = 'current';
box.style.backgroundImage = "url(./img/5-img/bg" + num + ".webp)";
num++;
}, 1600);
}
Auto_Play();
main.addEventListener("mouseenter", function () {
clearInterval(timer);
});
main.addEventListener("mouseleave", function () {
Auto_Play();
});