javascript - 简单的自动图像更换器故障

Question

我有一个简单的图像转换器，可以通过一个非常简单的 jQuery 在 2 个图像之间交换，但由于未知的原因，可能是睡眠不足，我无法让它按需要工作。

看看这个jsfiddle看看发生了什么。

这是js；$(文档).ready(函数 () {

function swap() {
    $('#display').attr('id', 'hidden').hide();
    $('#hidden').attr('id', 'display').fadeIn(500);

}


setInterval(swap, 2000);



});

谢谢！

Answer 1

fadeToggle 确实是最好的解决方案，但另一个解决方案可能是这样的。如果您想在隐藏和淡入旁边的切换中添加一些额外的逻辑。

 function swap() {
    if($("#display").is(":visible"))
    {
         $('#display').hide();
         $('#hidden').fadeIn(500);
    }
    else
    {
         $('#display').fadeIn(500);
         $('#hidden').hide();
    }
 }

http://jsfiddle.net/Rws8c/2/

Answer 2

这是关于你想要做的事情：

$(document).ready(function () {


    function swap() {
        $('#display').fadeToggle(500);
        $('#hidden').fadeToggle(500);

    }


    setInterval(swap, 2000);



});

Answer 3

以下使用稍微不同的方法，使您可以轻松添加 2 个以上的图像：

HTML

<!-- Define a single img element -->
<img src="http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/NiceandSlezzy.png" alt="The Tin Pigeons" title="The Tin Pigeons" id="display">

JavaScript / jQuery

$(document).ready(function () {
// create an array that contains a entry for each img src. For more images, just add additional array entries. 
var images = ['http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/NiceandSlezzy.png',
              'http://musicglue-profile-pages.s3.amazonaws.com/wp-content/uploads/2013/03/La-Route-Du-Rock1.jpg'];
    var curImage=images.length-1;
    var $image = $('#display');

    function swap() {
        $image.hide().attr('src', images[curImage]);
        if (curImage==images.length-1) {
            curImage=-1
        }
        curImage++;
        $image.fadeIn(500)
    }

    setInterval(swap, 2000);

});