用HTML写一个动态的的电子相册实战详细案例

news2024/12/27 13:29:32

效果展示：👇 请添加图片描述

详细代码：

1、新建一个.html文件
在这里插入图片描述
2、然后将下面的内容复制到动态相册.html里面

<!DOCTYPE html>
<html>
<head>
  <title>图片轮播效果</title>
  <style>
    .container {
      position: relative;
      width: 1600px;
      height: 1100px;
      overflow: hidden;
    }
    .slideshow {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: background-color 0.5s ease;
    }
    .slideshow img {
      width: 100%;
      height: auto;
    }
    .slideshow-button {
      position: absolute;
      bottom: 10px;
      right: 10px;
      z-index: 1;
      display: none;
    }
    .slideshow-button button {
      margin-right: 10px;
    }
    .slideshow:hover .slideshow-button {
      display: block;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="slideshow" id="slideshow">
      <img src="image1.jpg" alt="Image 1">
     <img src="image2.jpg" alt="Image 2">
      <img src="image3.jpg" alt="Image 3"> 
    </div>
    <div class="slideshow-button">
      <button οnclick="prevSlide()">上一张</button>
      <button οnclick="nextSlide()">下一张</button>
    </div>
  </div>
  <script>
    var slideshow = document.getElementById("slideshow");
    var images = slideshow.getElementsByTagName("img");
    var currentIndex = 0;
    var imageCount = images.length;

    function nextSlide() {
      currentIndex = (currentIndex + 1) % imageCount;
      updateSlide();
    }

    function prevSlide() {
      currentIndex = (currentIndex - 1 + imageCount) % imageCount;
      updateSlide();
    }

    function updateSlide() {
      for (var i = 0; i < imageCount; i++) {
        images[i].style.display = i === currentIndex ? "block" : "none";
      }
    }

    var autoPlay = setInterval(nextSlide, 2000); // 每2秒自动切换下一张图片
  </script>
</body>
</html>

3、将自己的图片放入到与动态相册.html相同的文件夹下
在这里插入图片描述

注：这里有多少张照片，就需要在这里都添加上，让其读取！！！

    <div class="slideshow" id="slideshow">     
     <img src="image1.jpg" alt="Image 1">  
     <img src="image2.jpg" alt="Image 2">     
     <img src="image3.jpg" alt="Image 3">     
           ....     
            ....    
     <img src="image100.jpg" alt="Image 100">

4、双击运行

在这里插入图片描述
最后显示结果：
请添加图片描述

今天的分享就到这里了。有收获的小伙伴，记得点赞、收藏、分享哦！

如果您对本次分享的内容感兴趣的话，记得关注哦！不然下次找不到喽！
关注不迷路哦！

“好记性不如烂笔头”，IT小本本 —— 记录IT知识，分享打工人真实的日常操作笔记！！！
😝有需要的小伙伴，可以V扫描下方二维码免费关注哦！第一时间获取最新动态！！

在这里插入图片描述