文化祭サイトにJavaScriptで動きをつけよう！カウントダウン・スライドショー

<p class="countdown" id="countdown"></p>

.countdown {
  font-size: 1.2rem;
  margin-top: 12px;
  background: rgba(255,255,255,0.2);
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
}

// 文化祭の日付を設定（年, 月-1, 日）
const festivalDate = new Date(2026, 8, 20); // 9月20日

function updateCountdown() {
  const now = new Date();
  const diff = festivalDate - now;
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

  const el = document.getElementById("countdown");
  if (days > 0) {
    el.textContent = "🎉 文化祭まであと " + days + "日 " + hours + "時間！";
  } else if (days === 0) {
    el.textContent = "🎊 今日は文化祭です！楽しもう！";
  } else {
    el.textContent = "文化祭は終了しました。ありがとうございました！";
  }
}

updateCountdown();
setInterval(updateCountdown, 60000); // 1分ごとに更新

<div class="slideshow">
  <img id="slide" src="photo1.jpg" alt="文化祭の写真">
  <div class="slide-btns">
    <button id="prev-btn">◀ 前</button>
    <button id="next-btn">次 ▶</button>
  </div>
</div>

.slideshow {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 32px;
}
.slideshow img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.slide-btns {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.slide-btns button {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: #ff6b6b;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
}

const photos = ["photo1.jpg", "photo2.jpg", "photo3.jpg"];
let current = 0;
const slideImg = document.getElementById("slide");

function showSlide(index) {
  current = index;
  if (current < 0) current = photos.length - 1;
  if (current >= photos.length) current = 0;
  slideImg.src = photos[current];
}

document.getElementById("prev-btn").addEventListener("click", function() {
  showSlide(current - 1);
});
document.getElementById("next-btn").addEventListener("click", function() {
  showSlide(current + 1);
});

// 5秒ごとに自動切り替え
setInterval(function() {
  showSlide(current + 1);
}, 5000);