使用AJAX构建图片轮播和相册功能

<!-- 图片轮播容器 -->
<div id="imageSlider">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

<script>
  // 图片索引和切换时间间隔
  var currentImage = 0;
  var interval = 5000; // 5秒切换一次图片

  // 获取图片轮播容器和所有图片元素
  var imageSlider = document.getElementById("imageSlider");
  var images = imageSlider.getElementsByTagName("img");

  // 切换图片的函数
  function changeImage() {
    images[currentImage].style.display = "none";
    currentImage = (currentImage + 1) % images.length;
    images[currentImage].style.display = "block";
  }

  // 设置定时器，定期切换图片
  setInterval(changeImage, interval);
</script>

<!-- 图片相册容器 -->
<div id="imageGallery">
  <img src="thumbnail1.jpg" alt="Thumbnail 1" onclick="showImage('image1.jpg')">
  <img src="thumbnail2.jpg" alt="Thumbnail 2" onclick="showImage('image2.jpg')">
  <img src="thumbnail3.jpg" alt="Thumbnail 3" onclick="showImage('image3.jpg')">
</div>

<!-- 大图展示容器 -->
<div id="imageModal">
  <span class="close" onclick="closeImageModal()">&times;</span>
  <img id="modalImage" src="" alt="Image">
</div>

<script>
  // 打开大图展示
  function showImage(imageUrl) {
    var modal = document.getElementById("imageModal");
    var modalImage = document.getElementById("modalImage");
    modalImage.src = imageUrl;
    modal.style.display = "block";
  }

  // 关闭大图展示
  function closeImageModal() {
    var modal = document.getElementById("imageModal");
    modal.style.display = "none";
  }
</script>