通過給定的圖像動畫一個笑臉的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

回答

相關問題