HTML+CSS+JS 全景轮播
实现了一个全景轮播的效果，包括多张图片在容器中的轮播展示，以及左右按钮的控制。其中，CSS实现了图片的布局和样式，JavaScript实现了左右按钮的点击事件，以及图片的切换。
Code
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="./56-全景轮播.css">
</head>
<body>
<div class="container">
<div id="slide">
<div class="item" style="background-image:url('./images/01.jpg')"></div>
<div class="item" style="background-image:url('./images/02.jpg')"></div>
<div class="item" style="background-image:url('./images/03.jpg')"></div>
<div class="item" style="background-image:url('./images/04.jpg')"></div>
<div class="item" style="background-image:url('./images/05.jpg')"></div>
<div class="item" style="background-image:url('./images/06.jpg')"></div>
</div>
<div class="buttons">
<div class="left">
< Prev</div>
<div class="center">下载壁纸</div>
<div class="right">Next ></div>
</div>
</div>
<script src="./56-全景轮播.js"></script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.item {
width: 240px;
height: 160px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 30px 50px #505050;
background-size: cover;
background-position: center;
transition: 1s;
}
.item:nth-child(1),
.item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(0);
box-shadow: none;
border-radius: 0;
}
.item:nth-child(3) {
left: 70%;
}
.item:nth-child(4) {
left: calc(70% + 250px);
}
.item:nth-child(5) {
left: calc(70% + 500px);
}
.item:nth-child(n+6) {
left: calc(70% + 750px);
opacity: 0;
}
.buttons {
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
display: flex;
justify-content: center;
}
.buttons div {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin: 0 25px;
transition: .5s;
cursor: pointer;
user-select: none;
font-size: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
JavaScript
const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const slide = document.querySelector("#slide")
let openClick = true // 节流处理 (保证动画执行过程，按钮不被重复点击)
leftBtn.addEventListener("click", () => {
if (openClick) {
openClick = false // 触发点击后，禁用按钮
const items = document.querySelectorAll(".item")
slide.prepend(items[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1s 再开放按钮的点击
}
})
rightBtn.addEventListener("click", () => {
if (openClick) {
openClick = false
const items = document.querySelectorAll(".item")
slide.appendChild(items[0])
setTimeout(() => openClick = true, 1000)
}
})
实现思路拆分
CSS 部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
重置默认样式。
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
设置容器占据全部视窗宽高，相对定位，且隐藏溢出内容。
.item {
width: 240px;
height: 160px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 30px 50px #505050;
background-size: cover;
background-position: center;
transition: 1s;
}
设置轮播图项的样式，包括尺寸、位置、阴影、圆角、背景覆盖等。
.item:nth-child(1),
.item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(0);
box-shadow: none;
border-radius: 0;
}
为前两个轮播图项设置特殊样式，使其全屏显示。
.item:nth-child(3) {
/* ... */
}
设置第三个轮播图项的位置。
.item:nth-child(3) {
left: 70%;
}
设置第六个及以后轮播图项的透明度为0，表示它们在视觉上不可见。
.buttons {
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
display: flex;
justify-content: center;
}
设置按钮容器的样式，包括宽度、位置、布局等。
.buttons div {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin: 0 25px;
transition: .5s;
cursor: pointer;
user-select: none;
font-size: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
为按钮设置样式，包括尺寸、文本对齐、圆角、过渡效果等。
JavaScript 部分
const leftBtn = document.querySelector(".buttons .left");
const rightBtn = document.querySelector(".buttons .right");
const slide = document.querySelector("#slide");
let openClick = true;
获取左右按钮和轮播容器元素，设置openClick变量用于控制点击事件。
leftBtn.addEventListener("click", () => {
if (openClick) {
openClick = false // 触发点击后，禁用按钮
const items = document.querySelectorAll(".item")
slide.prepend(items[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1s 再开放按钮的点击
}
})
为左按钮添加点击事件，实现轮播图的左切换。
rightBtn.addEventListener("click", () => {
if (openClick) {
openClick = false
const items = document.querySelectorAll(".item")
slide.appendChild(items[0])
setTimeout(() => openClick = true, 1000)
}
})
为右按钮添加点击事件，实现轮播图的右切换。
感谢分享 有用
发表评论