推荐开源项目：Spotlight.js - 现代HTML5媒体画廊库
warning:
这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。
Spotlight.js 是一个用于创建漂亮的HTML5媒体画廊的库。以下是一个使用 Spotlight.js 创建媒体画廊的简单示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spotlight.js Media Gallery Example</title>
<link rel="stylesheet" href="spotlight.css" />
<script src="spotlight.js"></script>
<style>
.spotlight {
width: 600px;
height: 400px;
margin: auto;
}
</style>
</head>
<body>
<div class="spotlight">
<div class="media-gallery">
<img src="image1.jpg" data-caption="Caption for Image 1" />
<img src="image2.jpg" data-caption="Caption for Image 2" />
<img src="image3.jpg" data-caption="Caption for Image 3" />
<!-- More images can be added here -->
</div>
</div>
<script>
// Initialize Spotlight with the media gallery
const gallery = document.querySelector('.media-gallery');
const spotlight = new Spotlight(gallery, {
overlay: true, // Display an overlay over the media
keyboard: true, // Enable keyboard navigation
captions: true // Display image captions
});
</script>
</body>
</html>在这个例子中，我们首先引入了必要的CSS和JavaScript文件。然后，我们定义了一个.spotlight容器，在其中放置了包含多张图片的.media-gallery容器。每个<img>标签上的data-caption属性用于提供图片标题。最后，我们初始化了Spotlight实例，并配置了一些选项，如是否显示遮罩、是否启用键盘导航以及是否显示图片标题。
评论已关闭