例如，我们可以使用以下代码创建一个名为“myImages”的图片数组：
var myImages = ["image1.png", "image2.jpg", "image3.gif", "image4.webp"];在这个数组中，有四个元素，每个元素都是一个字符串，表示不同的图片文件名。我们可以随时添加或删除数组中的元素来满足实际需求。
如果我们需要在网页中显示这些图片，可以使用以下代码来访问数组中的特定元素：
document.getElementById("myImage").src = myImages[0];这行代码将通过 ID 获取页面上的图像元素，并将其 src 属性设置为数组中的第一个元素。这使得我们可以轻松地在不同的地方使用相同的图片，并确保图片只会被加载一次。
另一种使用图片数组的常见场景是创建轮播图或幻灯片效果。我们可以将所有幻灯片的图片路径存储在数组中，然后使用 JavaScript 在不同的幻灯片之间切换。
var imageIndex = 0;
var imageArray = ["slide1.jpg", "slide2.jpg", "slide3.jpg", "slide4.jpg"];
function changeImage() {
var img = document.getElementById("slideshow");
img.src = imageArray[imageIndex];
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
setTimeout(changeImage, 2000);
}
window.onload = changeImage;在这个例子中，我们定义了一个全局变量 imageIndex 来跟踪当前应该显示哪张幻灯片的图片。我们还使用一个名为 imageArray 的数组来存储所有幻灯片的图片路径。
在 changeImage() 函数中，我们首先获取图像元素并将其 src 属性设置为 imageArray 中的元素。然后，我们将 imageIndex 的值加 1，以便在下一个函数调用时显示下一张幻灯片。如果 imageIndex 大于或等于数组的长度，我们将其重置为 0，以便从头开始循环。
最后，我们使用 setTimeout() 函数来设置幻灯片显示的时间间隔（这里为 2 秒）。这将使幻灯片自动滑动并在连续两张图片之间添加一个短暂的间隔。
总之，使用图片数组可以在网站或应用中更方便地管理和使用多个图片，并且降低了网络流量和浏览器资源的消耗。它是 Web 开发中重要的技术之一，值得我们深入学习和应用。
上一篇：ajax实现菜单跳转页面跳转页面跳转
下一篇：ajax实现购物车数量变化
