通过遍历列表来更改图像的 src答案

【问题标题】：Changing src of image by iterating through a list通过遍历列表来更改图像的 src
【发布时间】：2019-12-24 09:22:45
【问题描述】：

我正在尝试每十分之一秒更改一次图像。我已经根据此处的其他回复编写了一个脚本，但它仍然无法正常工作。这是脚本：

var images = Array();
var index = 0;
images = ["rock.png", "paper.png", "scissors.png"];
var opponent = document.getElementById("opps");

setInterval(myMethod, 100);

function myMethod( ){
    opponent.src = images[index];

    if (index <= 1){
        index++;
    }
    else{
        index = 0;
    }
}

这是标签：

<img src = "" id ="opps"/>

【问题讨论】：

这能回答你的问题吗？ Javascript set img src
它没有。我收到此错误：错误：未捕获的 TypeError：无法在 myMethod 设置属性“src”为 null

标签： javascript html image src

【解决方案1】：

我想通了。对于其他任何有此错误的人，这是由于您的脚本在您的 html 之前运行。在你的 img 之后运行脚本。

【讨论】：

不止于此
@Kenzoid "rock", "paper", "scissors" 是三个图像。发布的代码循环通过0、1、2 的index 值。任务完成！

【解决方案2】：

您可以通过 index % images.length 无限循环遍历数组 - 当您遍历索引时，它只会回绕

另外，您应该使用let a = [] 创建一个空数组。您不必必须，但这是一种很好的做法 - Read more

最后，100 毫秒可能有点太频繁地改变图像 src，在大多数情况下大约 1 - 5 秒应该足够了

var images = ["rock.png", "paper.png", "scissors.png"];
var index = 0;
var opponent = document.getElementById("opps");

setInterval(myMethod, 100);

function myMethod( ){
    opponent.src = images[index % images.length];
    index += 1;
    
    console.log(opponent.src);
}

&lt;img src = "" id ="opps"/&gt;

【讨论】：

【解决方案3】：

您的代码有效，images 数组中的字符串是相对的，因此您的项目中可能没有它们。我简化了一些事情，首先我在同一个表达式中初始化并声明了images 数组，其次，我将myMethod() 中的 if 语句变成了三元表达式：

let index = 0
const images = [
  "http://placekitten.com/200/200", 
  "http://placekitten.com/210/210", 
  "http://placekitten.com/220/220"
]

const opponent = document.getElementById("opps");

setInterval(myMethod, 1000)

function myMethod(){
    opponent.src = images[index];

    index = index <= 1 ? index + 1 : 0
}

&lt;img src="" id="opps"/&gt;

【讨论】：