Javascript 更改鼠标悬停时的多个图像问题

在鼠标上方更改多个图像时遇到问题。我尝试了下面的功能来更改鼠标上方的图像，但效果并不理想。在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);
}

JSIDLE链接：

---

我让你的JSFIDLE链接正常工作：

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);
}

---

您可以在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>

-----------------------------------更新-------------------

$( 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);
        });
    });


});

}))

及

---

这是你想要的吗？它允许一系列图像源，以防您需要添加更多图片：

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)});

---

也许你可以描述一下你期望它如何“完美”工作？！对我来说，javascript看起来过于复杂了。你想达到什么目的。作为一个附带问题，在HTML中包含诸如“onmouseover”之类的内联事件是一种不好的做法-您应该使用Javascriptonmouse over附加这些事件，我希望当前图像淡出，第二个图像淡入。几秒钟后，此图像淡出，第三个图像必须淡入上面的js FIDLE您可以看到第三个图像未淡出，图像的时间间隔也不均匀和平滑，请帮助三个图像是他们的，图像id是动态的，因此请编辑我的jsfiddle和Help在你的js fiddle链接中有一些计时问题。我希望所有的三张图片都应该一张一张地淡入淡出。我认为在上面的链接中进行更多的编辑可以实现这个计时游戏，看看你能做些什么，如果你在10或20分钟内没有成功的话。我会更新的。你的几乎很好。我认为第二张图片在上面的JSFIDLE中没有淡出。我只是检查了一下，它确实出现了。我在编辑中切换了顺序，所以再次检查。没有一个图像丢失。请检查。数组中的一个图像不会淡入。请帮助。嗯，也许你的图像加载速度没有我的快。现在试试。

<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;"/>

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)});