我是 JavaScript 初学者，我有一个问题，就像每 2 秒更改一次图像一样，我使用数组存储 12 个图像和 for 循环，但它没有按照我想要的方式工作，直接从图像 1 更改为图像 12无需移动整个 12。
这是我的脚本
var images = new Array(11) , x=0;
images[0] = new Array();
images [0].src = "images/smile_01.gif";
images[1] = new Array();
images [1].src = "images/smile_02.gif";
images[2] = new Array();
images [2].src = "images/smile_03.gif";
images[3] = new Array();
images [3].src = "images/smile_04.gif";
images[4] = new Array();
images [4].src = "images/smile_05.gif";
images[5] = new Array();
images [5].src = "images/smile_06.gif";
images[6] = new Array();
images [6].src = "images/smile_07.gif";
images[7] = new Array();
images [7].src = "images/smile_08.gif";
images[8] = new Array();
images [8].src = "images/smile_09.gif";
images[9] = new Array();
images [9].src = "images/smile_10.gif";
images[10] = new Array();
images [10].src = "images/smile_11.gif";
images[11] = new Array();
images [11].src = "images/smile_12.gif";
function changeimage(){
setInterval( function ima(){
for ( x = 0 ; x <= images.length ; x++ ){
document.getElementById("imag").src= images[x].src;
}
},1000);
}
HTML:
</head>
<body>
<img id = "imag" src="images/smile_00.gif" onload = "changeimage()">
</body>
</html>
最佳答案
我的方法是创建一个包含所有源 URL 的数组，如下所示:
var images = [
"images/smile_01.gif",
"images/smile_02.gif",
....
];
您可以使用循环来执行此操作:
var images = [];
for (var i = 1; i <= 12; i++) {
images.push("images/smile_" + i + ".gif");
}
然后从DOM中获取图像元素
var imag = document.getElementById("imag");
然后运行一个函数，该函数每 2 秒调用一次自身，更改图像并增加计数器
function changeImage(i) {
imag.src = images[i % images.length];
setTimeout(function() {
changeImage(i+1)
}, 2000);
};
changeImage(0);
奖励:在显示最后一张图像后，这再次从第一张图像开始
另请注意，除非您预加载图像，否则至少在每个图像第一次显示时您可能会看到白色闪烁。
关于JavaScript 通过给定图像制作笑脸动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28394291/