效果類似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>3D Animated Carousel</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
font-family: sans-serif;
}
.carousel-container {
position: relative;
width: 100%;
max-width: 1000px;
height: 60vmin;
display: flex;
justify-content: center;
align-items: center;
}
.carousel {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-item {
position: absolute;
width: 60%;
height: 100%;
transition: transform 0.6s ease, opacity 0.6s ease, z-index 0.6s;
opacity: 0;
z-index: 1;
transform: scale(0.8);
filter: brightness(0.5);
}
.center {
transform: scale(1.2) translateX(0);
opacity: 1;
z-index: 3;
filter: brightness(1);
}
.left {
transform: scale(0.9) translateX(-70%);
opacity: 0.6;
z-index: 2;
}
.right {
transform: scale(0.9) translateX(70%);
opacity: 0.6;
z-index: 2;
}
.nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255,255,255,0.2);
border: none;
color: white;
font-size: 2rem;
padding: 0.5rem 1rem;
cursor: pointer;
z-index: 10;
border-radius: 50%;
}
.nav-btn:hover {
background: rgba(255,255,255,0.4);
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
@media (max-width: 768px) {
.carousel-container {
height: 70vw;
overflow: visible;
}
.carousel {
overflow: visible;
}
.carousel-item {
width: 80vw;
max-width: 320px;
}
.center {
transform: scale(1.1) translateX(0);
}
.left {
transform: scale(0.85) translateX(-50%);
opacity: 0.5;
}
.right {
transform: scale(0.85) translateX(50%);
opacity: 0.5;
}
}
</style>
</head>
<body>
<div class="carousel-container">
<button class="nav-btn prev-btn" onclick="move(-1)">❮</button>
<div class="carousel" id="carousel"></div>
<button class="nav-btn next-btn" onclick="move(1)">❯</button>
</div>
<script>
const images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg'];
let current = 0;
const carousel = document.getElementById('carousel');
function createItem(src, className) {
const item = document.createElement('div');
item.className = 'carousel-item ' + className;
const img = document.createElement('img');
img.src = src;
img.style.width = '100%';
img.style.height = '100%';
img.style.objectFit = 'cover';
img.style.borderRadius = '10px';
img.addEventListener('click', () => {
window.open('https://thread18.com', '_blank');
});
item.appendChild(img);
return item;
}
function render() {
carousel.innerHTML = '';
const total = images.length;
const leftIndex = (current - 1 + total) % total;
const rightIndex = (current + 1) % total;
const centerItem = createItem(images[current], 'center');
const leftItem = createItem(images[leftIndex], 'left');
const rightItem = createItem(images[rightIndex], 'right');
carousel.appendChild(leftItem);
carousel.appendChild(centerItem);
carousel.appendChild(rightItem);
}
function move(direction) {
const total = images.length;
const oldCenter = carousel.querySelector('.center');
const oldLeft = carousel.querySelector('.left');
const oldRight = carousel.querySelector('.right');
if (direction === 1) {
// right pressed
if (oldLeft) oldLeft.remove();
if (oldCenter) oldCenter.className = 'carousel-item left';
if (oldRight) oldRight.className = 'carousel-item center';
const newIndex = (current + 2) % total;
const newRight = createItem(images[newIndex], 'right');
carousel.appendChild(newRight);
} else {
// left pressed
if (oldRight) oldRight.remove();
if (oldCenter) oldCenter.className = 'carousel-item right';
if (oldLeft) oldLeft.className = 'carousel-item center';
const newIndex = (current - 2 + total) % total;
const newLeft = createItem(images[newIndex], 'left');
carousel.prepend(newLeft);
}
current = (current + direction + total) % total;
}
window.addEventListener('load', render);
</script>
</body>
</html>