通过给定的图像动画一个笑脸的JavaScript

我是一个使用JavaScript的begginer，我有一个问题就像每2秒更改一次图像我用12个图像和循环的数组，但它没有按照我想要的方式工作，改变从图像1变为图像12的情况下直接通过整个12通过给定的图像动画一个笑脸的JavaScript

移动这个我的脚本

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>

来源

2015-02-08 Farah AlQ

多维数组的构造是不必要的。你可以这样做'images [＃] = uri'，其中'＃'是索引，'uri'是图像的路径。然后用间隔函数中的'images [＃]'检索。 – Mouser 2015-02-08 13:16:22

你的整个循环内发生setTinterval，但是动画成为vsible，你需要把每一次迭代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);

来源

2015-02-08 13:18:55

谢谢大家的帮忙，所有的代码都很有用， – 2015-02-09 20:07:53

@FarahAlQ，很好，我可以帮忙，请接受作为正确答案 – 2015-02-10 11:56:22

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.每次运行时间间隔（每秒）都会给x加1。我已更正您的阵列。如果您运行此脚本，则可以将鼠标悬停在图像上。你会看到图像的标题每秒都在变化。在我的例子中，第一张图片只是一个占位符，可以使onload工作。如果你打算使用这个，只需复制代码。

来源

2015-02-08 13:22:19 Mouser

我会做到这一点是创建所有源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);

奖励：这始于后再次在过去已被证明

还要注意的是，除非你预载的图片，你可能会至少获得白色闪烁在第一时间每个第一图像显示图像。

来源

2015-02-08 13:24:19 Suppen

漂亮，这可以永远运行，并始终使用modulo纠正！ – Mouser 2015-02-08 13:30:58

通过给定的图像动画一个笑脸的JavaScript

回答

相关问题