<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100svh;
background: #eaeaea;
overflow: hidden;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background: #f5f5f5;
box-shadow: 0 30px 50px #dbdbdb;
user-select: none;
}
.container .slide .item {
width: 160px;
height: 240px;
position: absolute;
top: 50%;
transform: translate(170%, -50%);
border-radius: 20px;
box-shadow: 0 30px 50px #505050;
background-position: 50% 50%;
background-size: cover;
background-repeat: no-repeat;
display: inline-block;
transition: 0.5s;
}
.slide .item:nth-child(1),
.slide .item:nth-child(2) {
top: 0;
left: 0;
transform: translate(0, 0);
border-radius: 0;
width: 100%;
height: 100%;
}
.slide .item:nth-child(2).content {
display: block;
}
.slide .item:nth-child(3) {
left: 50%;
}
.slide .item:nth-child(4) {
left: calc(50% + 180px);
}
.slide .item:nth-child(5) {
left: calc(50% + 360px);
}
.slide .item:nth-child(n + 6) {
left: calc(50% + 360px);
overflow: hidden;
}
.item .content {
position: absolute;
top: 50%;
left: 100px;
width: 300px;
text-align: left;
color: #eee;
transform: translate(0, -50%);
font-family: system-ui;
display: none;
}
.content .name {
font-size: 48px;
font-weight: bold;
opacity: 0;
animation: animate 1s ease-in-out 1 forwards;
}
.content .description {
margin-top: 10px;
margin-bottom: 20px;
opacity: 0;
animation: animate 1s ease-in-out 0.3s 1 forwards;
}
.content button {
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 8px;
opacity: 0;
animation: animate 1s ease-in-out 0.6s 1 forwards;
}
@keyframes animate {
from {
opacity: 0;
transform: translateX(100px);
filter: blur(33px);
}
to {
opacity: 1;
transform: translateX(0);
filter: blur(0);
}
}
.button {
position: absolute;
width: 100%;
text-align: center;
bottom: 10px;
}
.button button {
width: 40px;
aspect-ratio: 1/1;
border-radius: 50%;
border: none;
cursor: pointer;
margin: 0 5px;
border: 1px solid #000;
transition: 0.3s;
font-weight: 900;
}
.button button:hover {
background: #ababab;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="slide"></div>
<div class="button">
<button class="prev"> < </button>
<button class="next"> > </button>
</div>
</div>
<script>
const imageSources = [
'https://picfiles.alphacoders.com/585/thumb-1920-585412.jpg',
'https://images4.alphacoders.com/827/thumb-1920-827414.jpg',
'https://images6.alphacoders.com/658/thumb-1920-658763.jpg',
'https://images.alphacoders.com/847/thumb-1920-847523.jpg',
"https://images4.alphacoders.com/815/thumb-1920-815062.jpg",
"https://wallpapercave.com/wp/wp8149514.jpg",
"https://wallpapercave.com/wp/wp8624302.jpg",
"https://wallpapercave.com/wp/wp12797327.jpg",
"https://wallpapercave.com/wp/wp14956319.webp",
"https://images3.alphacoders.com/130/thumb-1920-1307862.png",
"https://images6.alphacoders.com/881/thumb-1920-881620.png",
"https://images6.alphacoders.com/827/thumb-1920-827267.png",
"https://images8.alphacoders.com/672/thumb-1920-672578.jpg",
"https://picfiles.alphacoders.com/653/thumb-1920-653665.png",
"https://wallpapercave.com/wp/wp12781718.jpg",
"https://wallpapercave.com/wp/wp15051636.webp",
"https://wallpapercave.com/wp/wp12350335.jpg",
"https://wallpapercave.com/wp/wp13840107.jpg",
"https://wallpapercave.com/wp/wp14864002.webp"
];
const slide = document.querySelector(".slide");
for (let i = 0; i < imageSources.length; i++) {
const item = document.createElement("div");
item.classList.add("item");
paddingNumber = (i + 1).toString().padStart(2, "0");
const imageSource = imageSources[i];
item.style.backgroundImage = `url(${imageSource})`;
slide.appendChild(item);
const content = document.createElement("div");
content.classList.add("content");
item.appendChild(content);
const name = document.createElement("div");
name.classList.add("name");
name.textContent = `中国风光 ${paddingNumber}`;
content.appendChild(name);
const description = document.createElement("div");
description.classList.add("description");
description.textContent = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut mauris euismod, bibendum tellus vel, efficitur tellus.`;
content.appendChild(description);
const button = document.createElement("button");
button.textContent = "了解更多";
content.appendChild(button);
}
let next = document.querySelector(".next");
let prev = document.querySelector(".prev");
next.addEventListener("click", function () {
let items = document.querySelectorAll(".item");
document.querySelector(".slide").appendChild(items[0]);
});
prev.addEventListener("click", function () {
let items = document.querySelectorAll(".item");
document.querySelector(".slide").prepend(items[items.length - 1]);
});
</script>
</body>
</html>
|
