中秋节3D图片画廊赏月团圆更温馨

2023-11-21 08:51:20

赏月迎中秋，3D画廊览佳景

中秋节的起源

中秋节，又称中秋、秋夕、团圆节等，是中国重要的传统节日。它的起源可以追溯到古代，当时人们在秋天举行庆祝丰收的活动，并逐渐演变成中秋节。中秋节的习俗主要包括赏月、吃月饼、赏桂花等。

「中秋元素相册」3D视觉画廊

值此中秋佳节之际，我们隆重推出「中秋元素相册」3D视觉画廊。这个画廊巧妙地运用了HTML、CSS和JS技术，打造了一个立体3D视觉效果的图片画廊，向大家展示了中秋节相关的精彩图片，包括月饼、桂花、玉兔等。用户可以手动播放图片，沉浸式体验画廊的美景。

画廊的特点

「中秋元素相册」3D视觉画廊拥有以下特点：

立体3D视觉效果： 画廊采用了先进的技术，创造了一个立体3D视觉效果的图片画廊，让用户仿佛置身于中秋的盛景之中。
丰富的图片内容： 画廊汇集了大量中秋节相关的图片，包括月饼、桂花、玉兔等，用户可以在欣赏画廊美景的同时，深入了解中秋节的文化内涵。
手动播放图片： 用户可以手动播放图片，控制图片播放的速度，尽情领略画廊的美景。

欣赏中秋之美

「中秋元素相册」3D视觉画廊是一个赏月佳品，也是一个了解中秋节的好去处。用户可以通过画廊欣赏中秋节的美丽景色，加深对中秋节的了解。在这个中秋佳节，让我们一起赏月、吃月饼、赏桂花，欢度佳节！

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <div id="gallery">
    <div class="image-container">
      <img src="images/mooncake.jpg" alt="月饼">
    </div>
    <div class="image-container">
      <img src="images/osmanthus.jpg" alt="桂花">
    </div>
    <div class="image-container">
      <img src="images/rabbit.jpg" alt="玉兔">
    </div>
  </div>
  <div id="controls">
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
  </div>
</body>
</html>

#gallery {
  width: 100%;
  height: 500px;
  overflow: hidden;
  position: relative;
}

.image-container {
  width: 33.33%;
  height: 500px;
  float: left;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

#controls {
  width: 100%;
  height: 50px;
  background-color: #000;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
}

#prev, #next {
  width: 50%;
  height: 50px;
  float: left;
  border: 0;
  color: #fff;
  background-color: #000;
}

#prev:hover, #next:hover {
  background-color: #333;
}

const gallery = document.getElementById('gallery');
const controls = document.getElementById('controls');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const images = gallery.getElementsByTagName('img');
let currentImage = 0;

next.addEventListener('click', () => {
  currentImage++;
  if (currentImage >= images.length) {
    currentImage = 0;
  }
  updateImage();
});

prev.addEventListener('click', () => {
  currentImage--;
  if (currentImage < 0) {
    currentImage = images.length - 1;
  }
  updateImage();
});

function updateImage() {
  for (let i = 0; i < images.length; i++) {
    images[i].style.display = 'none';
  }
  images[currentImage].style.display = 'block';
}

updateImage();