AI 生成 3D 輪播圖｜HTML + CSS + JS 實作分享

js jquery #ghatgpt

nlstudio 2025-07-22 16:08:44 ‧ 1398 瀏覽

分享至

效果類似

<!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>