改变背景图
html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>改变背景</title><link rel="stylesheet" href="index.css">
</head><body><div class="container"><div class="pannel active" style="background-image: url('https://picsum.photos/800/400')"><span>图1</span></div><div class="pannel" style="background-image: url('https://picsum.photos/800/401')"><span>图2</span></div><div class="pannel" style="background-image: url('https://picsum.photos/800/402')"><span>图2</span></div><div class="pannel" style="background-image: url('https://picsum.photos/800/403')"><span>图4</span></div><div class="pannel" style="background-image: url('https://picsum.photos/800/404')"><span>图5</span></div></div><script src="./indes.js"></script>
</body></html>css
* {margin: 0;padding: 0;}:root {--w100: 100%;--w100px: 100px;
}body {height: 100vh;display: flex;align-items: center;justify-content: center;
}.container {width: 90vw;height: 80vh;gap: 24px;display: flex;align-items: center;cursor: pointer;transition: all 700ms ease-in;.pannel {flex: 0.5;height: 100%;border-radius: 50px;position: relative;transition: all 700ms ease-in;background-position: center;background-size: cover;background-repeat: no-repeat;span {position: absolute;bottom: 40px;left: 30px;color: #fff;font-weight: bold;opacity: 0;transition: opacity 0.3s ease-in 0.4s;}}.active {transition: all 0.5s;flex: 5;span {opacity: 1;}}
}js
const pannels = document.querySelectorAll('.pannel')
console.log(pannels, 'pannels')pannels.forEach((pannel, index) => {pannel.addEventListener('click', () => {removeActiveClasses()pannel.classList.add('active')})
})function removeActiveClasses() {pannels.forEach((pannel, index) => {pannel.classList.remove('active');})
}
