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

本文主要是介绍用HTML写一个动态的的电子相册实战详细案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

详细代码：

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

在这里插入图片描述