按钮单击 Javascript 中的更改图像答案

【问题标题】：Button Click Change Images in Javascript按钮单击 Javascript 中的更改图像
【发布时间】：2019-01-31 13:08:17
【问题描述】：

我还在学习 Javacripts。这是我在家的第一个任务之一。但是，即使我尝试按照说明分步操作，我似乎也无法使代码正常工作。我需要创建一个幻灯片，当我单击按钮时，会出现一个新图像，直到它循环回到第一个图像。我检查了所有内容，但仍然无法弄清楚我做错了什么。如果您能解释和帮助，我将不胜感激。

<body onload="startup();">
    <center>

    <img id="banner" src="images/bangkok_thailand.jpg"> 
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>

<script>
        var imgArray = new Array();
        var index = 0;


function cycle() {
            document.getElementById("banner").src = imgArray[index].src;
            index = index + 1;
            if (index > 5 ) {
                index = 0;
            }
            return;

}

function startup()
    {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image; 
        imgArray[4] = new Image; 
        imgArray[5] = new Image;

    imgArray[0]. src="images/bangkok_thailand.jpg";
    imgArray[1]. src="images/paris_france.jpg";
    imgArray[2]. src="images/seoul_southkorea.jpg";
    imgArray[3]. src="images/tokyo_japan.jpg";
    imgArray[4]. src="images/istanbul_turkey.jpg";
    imgArray[5]. src="images/amsterdam_netherlands";
    }
    //cycle();
    return;


</script>
</center>

【问题讨论】：

“imgArray[0]”后面有一个空格。（在'src'之前）那行不通。
我也修复了它，但它仍然没有任何作用
可以显示第一张图片吗？
你最后的“返回”在函数之外，只是飞来飞去。 Javascript 不喜欢那样。
谢谢！我修复了它，它现在可以工作了:)

标签： javascript html css arrays image

【解决方案1】：

首先，您的脚本中有一个杂散的return - 这会导致函数无法加载。其次，imgArray[x]. 和 src 之间有一个空格。修复第一个问题，它应该可以工作，第二个问题是可选的，但您也需要修复它。

我在下面的演示中使用 https://picsum.photos/。希望这会有所帮助

<body onload="startup();">
  <center>

    <img id="banner" src="https://picsum.photos/400/300/?random">
    <br>
    <button onclick="cycle();">Click Here to Change Image</button>
    <script>
      var imgArray = new Array();
      var index = 0;


      function cycle() {
        document.getElementById("banner").src = imgArray[index].src;
        index = index + 1;
        if (index > 5) {
          index = 0;
        }
        return;
      }

      function startup() {
        imgArray[0] = new Image;
        imgArray[1] = new Image;
        imgArray[2] = new Image;
        imgArray[3] = new Image;
        imgArray[4] = new Image;
        imgArray[5] = new Image;

        imgArray[0].src = "https://picsum.photos/350/300/?random";
        imgArray[1].src = "https://picsum.photos/300/300/?random";
        imgArray[2].src = "https://picsum.photos/250/300/?random";
        imgArray[3].src = "https://picsum.photos/200/300/?random";
        imgArray[4].src = "https://picsum.photos/150/300/?random";
        imgArray[5].src = "https://picsum.photos/100/300/?random";
      }
    </script>
  </center>
</body>

【讨论】：

谢谢！我修好了它，它奏效了。我只是对 //cycle(); 感到困惑在底部，因为它显示在电源点上。我仍然不确定这是什么意思
它是一个函数，但它是commented out 使用//。不客气。欢迎来到堆栈溢出