在鼠標上更改多個圖像問題

我在更改鼠標懸停上的多個圖像時遇到問題。我試過下面的功能來改變鼠標懸停的圖像，但它並沒有完美的工作。通過Onmouseover事件，第一張圖像緩慢淡出，然後第二張圖像平穩淡入。幾秒鐘後，第二張圖像緩慢淡出，第三張圖像平穩淡入。在鼠標上更改多個圖像問題

function changeimage(img_id) 
{ 
setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(); }, 5000); 
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeIn(5000); 
    setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").show(); }, 5000); 
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeOut(5500); 
}

的jsfiddle鏈接：

http://jsfiddle.net/XVz95/3/

來源

2014-02-24 syam deth

也許你可以描述你是如何期待它爲「完美」的工作？ –

那javascript看起來嚴重過於複雜。你想要達到什麼目的？作爲一個側面的問題，它的不好的做法是在你的HTML中包含「onmouseover」這樣的內聯事件 - 你應該使用Javascript –

onmouse來附加這些事件，我希望當前圖像淡出，第二個圖像淡入。幾秒鐘後，這個圖像將消失，第三個圖像必須在 –

我做你的jsfiddle鏈接只是工作：

function changeimage(img_id) 
{ 
setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(); }, 5000); 
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeIn(5000); 
    setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").show(); }, 5000); 
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeOut(5500); 
}

http://jsfiddle.net/XVz95/4/

來源

2014-02-24 12:44:58

以上js小提琴中褪色，您可以看到第三個圖像不會消失，圖像的時間間隔也不平坦和光滑請幫助 –

可以在jQuery的如下

做

標記：

<div id="pdtimg_1"> 
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg"/> 
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg" style="display: none;"/> 
</div>

的JavaScript：

$(document).ready(function() { 
    $('#pdtimg_1').mouseover(function(){ 
     $(this).find('img:first').hide(); 
     $(this).find('img:last').show(); 
    }); 

    $('#pdtimg_1').mouseout(function(){ 
     $(this).find('img:first').show(); 
     $(this).find('img:last').hide(); 
    }); 
});

http://jsfiddle.net/CabK3/

----------------------- ------------ UPDATE -------------------

$(document).ready(function() { 
$('#pdtimg_1').mouseover(function(){ 
    var elem = $(this); 
    elem.find('img:first').fadeOut(5000, function() { 
     elem.find('img:nth-child(2)').fadeIn(5000, function() { 
      elem.find('img:nth-child(2)').fadeOut(5000); 
      elem.find('img:last').fadeIn(5000); 
     }); 
    }); 


});

}）;

和

<div id="pdtimg_1"> 
<img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg"/> 

<img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg" style="display: none;"/> 
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg" style="display: none;"/>

來源

2014-02-24 12:49:40

三張圖像是他們的圖像ID是動態如此好心編輯我的js小提琴和幫助 –

你需要玩的時間，但http://jsfiddle.net/qu8gS/應該這樣做 –

在你的js小提琴鏈接的一些計時問題。我想所有的三個圖像應該逐漸淡入和淡出。我想在上面的鏈接中可以進行更多的編輯 –

這就像你想要什麼？它允許圖像源的數組，如果你需要添加更多圖片：

function changeImage(img) { 
    var imgSrcArr = []; 
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg"); 
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg"); 
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg"); 

    $img = $(img); 
    if ($img.is(":visible")) { 
     $img.fadeOut(5500, function() { 
      var i = imgSrcArr.indexOf($(this).attr("src")); 
      i = i+1 >= imgSrcArr.length ? 0 : i+1; 
      $(this).attr("src", imgSrcArr[i]).on('load', function() {$(this).fadeIn(5000)}) 
     }); 
    } else { 
     $img.fadeIn(5000); 
    } 
} 

$("#pdtimg_1").mouseenter(function() {changeImage(this)});

jsFiddle example

來源

2014-02-24 13:07:38 SomeShinyObject

你幾乎沒事。我認爲第二張圖像不會在上面的jsfiddle中失效。 –

我剛檢查過，它確實如此。我在編輯中切換順序，然後再次檢查。 – SomeShinyObject

沒有任何圖像丟失。請檢查數組中的一個圖像是否會消失。請幫助。 –

在鼠標上更改多個圖像問題

回答

相關問題