JavaScript 图像数组

码农六六

已于 2022-11-18 20:46:21 修改

阅读量2.7k

点赞数

分类专栏： JavaScript数组学习方法文章标签： javascript 前端开发语言

于 2022-11-16 10:58:28 首次发布

原文链接：https://www.delftstack.com/howto/javascript/javascript-array-of-images/

版权

JavaScript数组学习方法专栏收录该内容

42 篇文章 2 订阅

订阅专栏

本教程向您介绍图像创建和迭代的 JavaScript 数组；它举例说明了使用 JavaScript Arrays和每 Array Objects个示例都有一个启动代码和相应的输出以供练习。

1.使用数组对象在JavaScript中显示图像数组

2.在JavaScript中使用数组显示图像数组

1.使用数组对象在JavaScript中显示图像数组

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方法一样），但从当前图像循环到后退

2.在JavaScript中使用数组显示图像数组

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];
}