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

Question

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

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"/>

Answer 1

您可以 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);
}

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

Answer 2

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

Answer 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
}

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

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

Changing src of image by iterating through a list

html

javascript

image

src