JavaScript 图像数组
本教程将指导你有关图像的 JavaScript 数组的创建和迭代；它举例说明了使用 JavaScript Arrays 和 Array Objects。每个示例都有一个启动代码和相应的输出来练习。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<script src="./javascript/imageArray.js"></script>
<link rel="stylesheet" href="./css/styles.css">
<title>Image Iteration</title>
</head>
<body>
<h1>Click to see the next image</h1>
<div id="splash">
<img src="./images/splash class room image.jpg" alt="classroom image" id="mainImage">
</div>
<div id="controls">
<button id="previousbtn" onclick="previousImage()">Previous Image</button>
<button id="nextbtn" onclick="nextImage()"> Next Image</button>
</div>
</body>
</html>
CSS 代码：
img{
width: 350px;
height: 350px;
}
#previousbtn{
margin-right: 75px;;
}
#nextbtn{
margin-left: 75px;
}
JavaScript 代码：
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = './images/splash class room image.jpg';
imgArray[1] = new Image();
imgArray[1].src = './images/splash animal image.jpg';
imgArray[2] = new Image();
imgArray[2].src = './images/splash nature image.jpg';
imgArray[3] = new Image();
imgArray[3].src = './images/splash food image.jpg';
imgArray[4] = new Image();
imgArray[4].src = './images/splash travel image.jpg';
function nextImage(){
var img = document.getElementById("mainImage");
for(var i = 0; i < imgArray.length;i++){
if(imgArray[i].src == img.src){
if(i === imgArray.length){
document.getElementById("mainImage").src = imgArray[0].src;
break;
}
document.getElementById("mainImage").src = imgArray[i+1].src;
break;
}
}
}
function previousImage(){
var img = document.getElementById("mainImage");
for(var i = imgArray.length-1; i >=0 ;i--){
if(imgArray[i].src == img.src){
if(i === imgArray.length){
document.getElementById("mainImage").src = imgArray[4].src;
break;
}
document.getElementById("mainImage").src = imgArray[i-1].src;
break;
}
}
}
输出：
在这段代码中，每个 img 元素都是一个 image 对象。src 也是通过分配一个字符串来定义的，该字符串引用具有该特定图像的文件名。
nextImage 函数获取具有 id mainImage 的第一个元素，然后迭代最后一个图像。previousImage 函数还获取具有 id mainImage 的第一个元素（就像 nextImage 方法一样）但从当前图像向后循环。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<script src="./javascript/imageArray.js"></script>
<link rel="stylesheet" href="./css/styles.css">
<title>Image Iteration</title>
</head>
<body onload="makeImage();">
<div class="contents" id="content"></div>
<button onclick="nextImage()">Next Image</button>
</body>
</html>
CSS 代码：
img{
width: 350px;
height: 350px;
}
JavaScript 代码：
var images = ["./images/splash class room image.jpg",
"./images/splash animal image.jpg",
"./images/splash nature image.jpg",
"./images/splash food image.jpg",
"./images/splash travel image.jpg"];
var index = 0;
function makeImage() {
var img = document.createElement('img')
img.src = images[index];
document.getElementById('content').appendChild(img);
}
function nextImage(){
var img = document.getElementById('content').getElementsByTagName('img')[0]
index++;
index = index % images.length;
img.src = images[index];
}
makeImage 函数构造 img 标签并指定它们的 src 属性。使用 <body> 标记中的 onload 事件加载页面后立即调用此函数。createElement 创建 HTML 元素（我们正在为这个示例创建一个 img 元素）。
然后它指定 img.src 来获取图像。appendChild 函数在 id 为 content 的元素中附加 img 元素。
简单来说，makeImage 函数是在 id 值为 content 的标签内制作 img 标签。
nextImage 函数中的第一行代码获取 id 为 content 的元素的第一个 img 标签。index = index % images.length; 如果输出中有最后一张图像，则会将你带到第一张图像。
你会看到图像，因为此函数还设置了 src 属性。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
