如何显示来自 JavaScript 数组/对象的图像？从第一张图片开始，然后点击下一张[关闭]答案

【问题标题】：How to display images from a JavaScript array/object? Starting with the first Image then onclick to the next [closed]如何显示来自 JavaScript 数组/对象的图像？从第一张图片开始，然后点击下一张[关闭]
【发布时间】：2014-09-28 20:30:37
【问题描述】：

尝试从我的 JavaScript 数组加载图像并显示数组中的第一个。然后我需要添加一个函数，该函数将允许显示数组中的下一个图像，依此类推，直到数组结束。

<script>
var images = [ '/images/1.png', '/images/2.png' ];

function buildImages() {
    for (var i = 0; i < images.length; i++) {
        document.createElement(images[i]);
    }
}
</script>

</head>
<body>
    <div onload="buildImages();" class="contents" id="content"></div>
</body>

在图像数组中是图像的路径。它们看起来像“server/images/05-08-2014-1407249924.png”

【问题讨论】：

images 数组的内容是什么？
看起来像server/images/05-08-2014-1407249924.png的图像的路径
请将您的示例代码更改为类似的内容。 :) 谢谢！
发布渲染后的HTML，这里PHP无关。
这是来自 (khakiout) 的回答，点击下一张图片进行修改 -- jsfiddle.net/3E5Q9

标签： javascript html arrays dom

【解决方案1】：

看看我是怎么做到的

<script>
    var images = ['img/background.png','img/background1.png','img/background2.png','img/background3.png'];
    var index = 0;

    function buildImage() {
      var img = document.createElement('img')
      img.src = images[index];
      document.getElementById('content').appendChild(img);
    }

    function changeImage(){
      var img = document.getElementById('content').getElementsByTagName('img')[0]
      index++;
      index = index % images.length; // This is for if this is the last image then goto first image
      img.src = images[index];
    }
</script>

<body onload="buildImage();">
    <div class="contents" id="content"></div>
    <button onclick="changeImage()">NextImage</button>
</body>

我不确定div 是否有onload 事件，所以我将onload 称为body。

DEMO

【讨论】：

这完美地加载了第一张图片，但我如何将图片更改为数组中的下一张？
@user3889508 DEMO
您可以简化 changeImage 并使其更具动态性：function changeImage(){var img = document.getElementById('content').getElementsByTagName('img')[0]; img.src = images[index++%images.length]; }

【解决方案2】：

// the container
var container = document.getElementById('content');
for (var i = 0; i < images.length; i++) {
    // create the image element
    var imageElement = document.createElement('img');
    imageElement.setAttribute('src', images[i]);

    // append the element to the container
    container.appendChild(imageElement);
}

有关如何执行 DOM 操作/创建的更多信息，请阅读MDN 和其他资源。这些对你的发展有很大帮助。

JSFiddle

【讨论】：

【解决方案3】：

    <body>
<img id="thepic"/>
<input type="button" id="thebutt" value="see next"/>
<script>
(function (){
        var images = ['img/background.png','img/background1.png','img/background2.png','img/background3.png'];
        var imgcnt = 1;
        function changeIt() {
          if(imgcnt<images.length){
          document.getElementById("thepic").src=images[imgcnt++];
          } else{
          console.log("done")
          }
        }

        document.getElementById("thepic").src=images[0];
        document.getElementById("thebutt").onclick=changeIt;

        })();
        </script>
</body>

【讨论】：