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

效果展示:👇

详细代码:

1、新建一个.html文件

2、然后将下面的内容复制到 动态相册.html里面

css 复制代码
<!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相同的文件夹下

注:这里有多少张照片,就需要在这里都添加上,让其读取!!!

css 复制代码
    <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扫描下方二维码免费关注哦!第一时间获取最新动态!!

相关推荐
m0_748240257 分钟前
前端如何检测用户登录状态是否过期
前端
black^sugar8 分钟前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing1 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245521 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v1 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing1 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600951 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600951 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL1 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js