artsite/views/banner.ejs

<link rel="stylesheet" href="/stylesheets/banner.css">

<div class="carousel-container">
  <button class="btn-prev">❮</button>
  <div class="carousel-images">
    <div class="item" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
      <img width="50%" src="http://color.jccytech.cn/thumbs/v2/page/480/5d8898684278e31afd9b6968.jpeg" alt="<%= translate.cuteCat[lang] %>">
      <div style="padding-right: 60px;">
        <h1><%= translate.cuteCat[lang] %></h1>
        <p class="cat-description"><%= translate.cuteCatDescription[lang] %></p>
        <a href="/play/5d8898684278e31afd9b6968" class="carousel-play-btn"><%= translate.play[lang] %></a>
      </div>
    </div>

    <div class="item" style="display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;">
      <div>
        <h1><%= translate.daily[lang] %></h1>
        <div style="font-weight: bold; font-size: 20px; color: #aaa; padding-bottom: 20px;">2025/01/19</div>
        <a href="/play/6783978993b021143d362277" class="carousel-play-btn"><%= translate.play[lang] %></a>
      </div>
      <img width="40%" src="http://color.jccytech.cn/thumbs/v2/page/480/6783978993b021143d362277.jpeg" alt="<%= translate.daily[lang] %>">
    </div>

    <div class="item" style="position: relative; display: inline-block;">
      <img width="100%" src="https://color.jccytech.cn/res/coloring/album_cover/720/661cf6deaae27d6dda120bcc.jpeg" alt="<%= translate.cuteKids[lang] %>">
      <h3 style="position: absolute; top: 20px; left: 20px; color:#ccc; "><%= translate.album[lang] %></h3>
      <h1 style="position: absolute; top: 40px; left: 20px; color:white; "><%= translate.cuteKids[lang] %></h1>
    </div>

    <div class="item" style="position: relative; display: inline-block;">
      <img width="100%" src="https://color.jccytech.cn/res/coloring/album_cover/720/670e26713562c348e1b64db0.jpeg" alt="<%= translate.animalsHappyTime[lang] %>">
      <h3 style="position: absolute; top: 20px; left: 20px; color:#ccc; "><%= translate.album[lang] %></h3>
      <h1 style="position: absolute; top: 40px; left: 20px; color:white; "><%= translate.animalsHappyTime[lang] %></h1>
    </div>

  </div>
  <button class="btn-next">❯</button>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const carouselImages = document.querySelector('.carousel-images');
    const items = document.querySelectorAll('.carousel-images .item');
    const prevButton = document.querySelector('.btn-prev');
    const nextButton = document.querySelector('.btn-next');
    let currentIndex = 0;

    function showItem(index) {
      if (index >= items.length) {
        currentIndex = 0;
      } else if (index < 0) {
        currentIndex = items.length - 1;
      } else {
        currentIndex = index;
      }
      const offset = -currentIndex * 100; // 每张图片占100%宽度
      carouselImages.style.transform = `translateX(${offset}%)`;
    }

    prevButton.addEventListener('click', function () {
      showItem(currentIndex - 1);
    });

    nextButton.addEventListener('click', function () {
      showItem(currentIndex + 1);
    });
  });

</script>