JavaScript通过给定的图像动画笑脸
我是JavaScript的乞丐，我有一个问题，那就是我每2秒对12个图像和循环使用数组来改变图像，但它不是我想要的，而是从图像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>回答 3
Stack Overflow用户
发布于 2015-02-08 13:18:55
整个循环发生在setTinterval内部，但是要使动画变得可行，您需要将循环的每一次迭代放在setInterval中，
同样，正如注释中指出的那样，可以简化数组；
var images = [
"images/smile_01.gif",
"images/smile_02.gif",
"images/smile_03.gif",
"images/smile_04.gif",
...
];
var i = 0,
image = document.getElementById("imag");
setInterval( function () {
if (i >= images.length) {
i = 0;
}
image.src = images[i];
i++;
},1000);Stack Overflow用户
发布于 2015-02-08 13:24:19
我这样做的方法是创建一个包含所有源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);奖励:在最后一个图像显示后，第一个图像再次开始。
还请注意，除非预先加载图像，否则至少在第一次显示每个图像时，您可能会得到白色的闪烁。
Stack Overflow用户
发布于 2015-02-08 13:22:19
var images = new Array(11), x=0;
images[0] = "images/smile_01.gif";
images[1] = "images/smile_02.gif";
images[2] = "images/smile_03.gif";
images[3] = "images/smile_04.gif";
images[4] = "images/smile_05.gif";
images[5] = "images/smile_06.gif";
images[6] = "images/smile_07.gif";
images[7] = "images/smile_08.gif";
images[8] = "images/smile_09.gif";
images[9] = "images/smile_10.gif";
images[10] = "images/smile_11.gif";
images[11] = "images/smile_12.gif";
function changeimage(){
setInterval( function(){
document.getElementById("imag").src = images[x];
document.getElementById("imag").title = images[x];
x++;
if (x >= images.length)
{
x=0;
}
},1000);
}<img id="imag" src="http://www.terrafloraonline.com/images/userfiles/images/flower01LOW.png" onload="changeimage()" title="start" />
你不需要循环。setInterval itself is a loop.每隔一段时间运行(每秒)，它会将1添加到x中。我已经纠正了你的排列。如果运行此脚本，可以将鼠标悬停在图像上。您将看到图像的标题每秒钟都会发生变化。在我的示例中，第一个映像只是一个占位符，可以使onload工作。如果您要使用这个，只需复制代码。
https://stackoverflow.com/questions/28394291
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号