HTML+CSS+JS 焦点轮播
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
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="./59-焦点轮播.css"> </head>
<body> <div class="container"> <div class="bigbox"></div> <div class="list"> <ul> <li><img class="active" src="img/1.jpg" alt=""></li> <li><img src="img/2.jpg" alt=""></li> <li><img src="img/3.jpg" alt=""></li> <li><img src="img/4.jpg" alt=""></li> <li><img src="img/5.jpg" alt=""></li> </ul> </div> </div> </body>
<script src="./焦点轮播.js"></script>
</html> |
CSS:
|
* { margin: 0; padding: 0; box-sizing: border-box; }
body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(to bottom, pink, skyblue); }
.container { width: 1000px; position: relative; }
.container .bigbox { width: 1000px; height: 500px; margin: 10px; background: url(img/1.jpg) no-repeat center / cover; border-radius: 5px; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); transition: all 1s; }
.container ul { list-style: none; position: relative; width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center; gap: 15px; }
.container ul li { flex: 1; height: 120px; cursor: pointer; }
.container ul li img { width: 100%; height: 100%; border-radius: 10px; box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); }
.container ul li img.active { border: 5px solid orange } |
JS：
|
const bigbox = document.querySelector('.bigbox') const imgs = document.querySelectorAll('img') let canChange = true // 节流处理
imgs.forEach(img => { img.addEventListener('click', function () { if (canChange) { bigbox.style.backgroundImage = `url(${this.src})` imgs.forEach(item => item.classList.remove('active')) this.classList.add('active')
canChange = false setTimeout(() => canChange = true, 1000) } }) }) |
