JavaScript图片浏览代码
时间: 2023-07-09 10:24:26 浏览: 48
以下是一个简单的 JavaScript 图片浏览器的源代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 图片浏览器</title>
<script>
var images = ["images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg"];
var currentIndex = 0;
function showImage() {
var img = document.getElementById("image");
img.src = images[currentIndex];
}
function nextImage() {
currentIndex++;
if (currentIndex >= images.length) {
currentIndex = 0;
}
showImage();
}
function prevImage() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = images.length - 1;
}
showImage();
}
</script>
</head>
<body>
<h1>JavaScript 图片浏览器</h1>
<!-- 图片展示区域 -->
<img id="image" src="images/image1.jpg" alt="图片1">
<!-- 按钮区域 -->
<button onclick="prevImage()">上一张</button>
<button onclick="nextImage()">下一张</button>
</body>
</html>
```
以上代码中,我们使用 JavaScript 实现了一个简单的图片浏览器。首先,我们定义了一个数组 `images` 存储了图片的路径,然后定义了一个变量 `currentIndex` 记录当前显示的图片的索引。`showImage()` 函数用于显示当前索引对应的图片,`nextImage()` 和 `prevImage()` 函数用于切换图片。在 HTML 中,我们使用 `<img>` 标签展示图片,使用两个按钮分别调用 `nextImage()` 和 `prevImage()` 函数来切换图片。
在实际应用中,可以通过添加更多的功能来增强图片浏览器,如图片缩放、全屏显示、幻灯片播放等。