onmouseover和超時JavaScript的

Question

我有這個ID在我的html代碼：

<div id="me"> 
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/> 
</div> 

我如何可以改變圖片每3秒一次的鼠標移動到圖片，

，並返回到原始圖片一旦鼠標熄滅？

Answer 1

您可以創建一個功能，每3秒更換一次圖像。然後，將鼠標懸停在圖像上時，調用該函數並啓動一個計時器。當鼠標離開圖像時，清除計時器。

var img = document.getElementById("me").getElementsByTagName("img")[0]; 
var images = ["Me.JPG", "new image path", "..."]; 
var i = 1; 
var timer; 

function change() { 
    img.src = images[i]; 
    if (++i >= images.length) { 
     i = 0; 
    } 
    timer = setTimeout(change, 3000); 
} 

img.onmouseover = function() { 
    timer = setTimeout(change, 3000); 
}; 

img.onmouseout = function() { 
    img.src = images[0]; 
    clearTimeout(timer); 
}; 

Answer 2

喜歡的東西，只是給img的myImg的id（或任何你想要的）：

var img_arr = ["img1.png", "img2.png", "img3.png"], 
    img_index = 0, 
    interval_id = 0, 
    div = document.getElementById("me"), 
    img = document.getElementById("myImg"); 

div.onmouseover = function() { 
    interval_id = window.setInterval(function() { 
     if (img_index === (img_arr.length - 1)) { 
      img_index = 0; 
     } 
     img.src = img_arr[img_index++]; 
    }, 3000); 
}; 

div.onmouseout = function() { 
    window.clearInterval(interval_id); 
}; 

Answer 3

這裏有一個快速的解決方案中的鏈接的jsfiddle：http://jsfiddle.net/jJBEu/2/

var img = document.getElementById('me').getElementsByTagName('img')[0], 
    index = 0, 
    sources = [ 
     'http://icons.iconarchive.com/icons/iconka/social-treat/128/yumtube-icon.png', 
     'http://icons.iconarchive.com/icons/iconka/social-treat/128/sweeter-icon.png', 
     'http://icons.iconarchive.com/icons/iconka/social-treat/128/facebow-icon.png' 
    ], 
    timer; 

img.addEventListener('mouseover', swapImages, false); 
img.addEventListener('mouseout', function(){ 
    clearTimeout(timer); 
    img.src = sources[0]; 
}, false); 

function swapImages(event, setindex){ 
    index = index == (sources.length - 1) ? 0 : index + 1; 
    timer = setTimeout(function(){ 
     img.src = sources[index]; 
     swapImages(); 
    }, 3000); 
} 

編輯修復一個愚蠢的錯誤，我在檢查數組索引長度不減1。

Answer 4

HTML：

<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right" 
onmouseover="animate(this)" onmouseout="stopanimation()" /> 

的javascript：

/* globals */ 
var animTimer = null; 
var animImg = null; 
var images = [new Image(), new Image(), new Image(), new Image(), new Image(),new Image()]; 
var imgIndex = 0;  

/* pre-load images in browser cash */ 
images[0].src = "Me.JPG"; 
images[1].src = "anim1.gif"; 
images[2].src = "anim2.gif"; 
images[3].src = "anim3.gif"; 
images[4].src = "anim4.gif"; 
images[5].src = "anim5.gif"; 

/* animation */ 
function animate(img){ 
    if (typeof img != 'undefined'){animImg = img;} 

    imgIndex += 1; 
    if (imgIndex>images.length-1){imgIndex=1;} 

    animImg.src=images[imgIndex].src; 
    animTimer = setTimeout(animate, 3000); 
} 

function stopanimation(){ 
    clearInterval(animTimer); 
    animImg.src = images[0].src; 
}