2017-01-09 2 views
1
var myImage = document.getElementById("mainImage"); 

var imageArray = ["_images/1.jpg","_images/2.jpg","_images/3.jpg", 
        "_images/4.jpg","_images/5.jpg","_images/6.jpg"]; 

var imageIndex = 0; 

function changeImage() { 
    myImage.setAttribute("src", imageArray[imageIndex]); 
    imageIndex++; 
    if (imageIndex >= imageArray.length) { 
     imageIndex = 0; 
    } 
} 

私はあなたonmouseoverそれは、それが停止しますと、その後onmouseout、それが再び再開gif、のように変化する画像を取得する方法をJSに基本的な勉強します。私は下の部分で苦労しています。画像を含むsetIntervalでonmouseoverとonmouseoutイベントを使用してif else関数を設定するにはどうすればよいですか?

var intervalHandler = setInterval(changeImage, 3000); 

myImage.onmouseover = function(){ 
    clearInterval(intervalHandler); 
} 

myImage.onmouseout = function(){ 
    setInterval(changeImage, 3000); 
} 
+0

コンソールでエラーが発生しましたか? – void

答えて

0

ここにあなたの例がありますか?それを正しく行うにはhttp://www.w3schools.com/jsref/met_win_cleartimeout.asp

function clearInterval(timeout, period){ 
    return clearTimeout(callback,period); 
} 

function myStopFunction(timeout) { 
    clearTimeout(timeout); 
} 

ところで、あなたが実行したい無限に必ずループにする:

intervalHandler = setTimeout(changeImage, 3000); 

//Start initially: 
var intervalHandler = setTimeout(changeImage, 3000); 

myImage.onmouseover = function(){ 
    clearInterval(intervalHandler); 
} 

myImage.onmouseout = function(){ 
    //reset the variable, so it has the new timeout. 
    intervalHandler = setInterval(changeImage, 3000); 
} 

はあなたのsetInterval関数がタイムアウトを返すことを確認してくださいchangeImage関数の最後に

があります。

+0

このコードを実行するためにif文を使用しようとしています。再度、感謝します。 – PattyPutty

関連する問題