下面土嘎嘎小编分享一个简单的 JavaScript 相册示例，它使用 HTML 和 CSS 来创建相册布局，并使用 JavaScript 轮播图库（Swiper.js）来实现图片轮播效果：
〓〓html代码如下：〓〓
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
.swiper-container {
width: 600px;
height: 400px;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="image1.jpg" alt="Image 1"></div>
<div class="swiper-slide"><img src="image2.jpg" alt="Image 2"></div>
<div class="swiper-slide"><img src="image3.jpg" alt="Image 3"></div>
<!-- 添加更多的图片 -->
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</body>
</html>
在上面给出的示例中，你需要将 image1.jpg 、 image2.jpg 和 image3.jpg 替换为你自己的图片路径。你可以添加更多的图片，只需在 <div class="swiper-wrapper"> 内部添加类似的 <div class="swiper-slide"><img src="image.jpg" alt="Image"></div> 结构。
该示例使用了 Swiper.js 轮播图库，通过引入 CSS 和 JavaScript 文件，并在 JavaScript 中创建一个 Swiper 实例来实现图片轮播效果。你可以根据需要自定义相册样式和配置选项，Swiper.js 提供了丰富的功能和定制能力。