Question

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

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

这是js; $（document）.ready（function（）{

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

}


setInterval(swap, 2000);



});

谢谢！

Answer 1

fadeToggle确实是最好的解决方案，但另一种解决方案可能是这样的。如果你想为你的hide和fadein旁边的切换添加一些额外的逻辑。

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

});

简单的自动图像转换器故障

3 个答案: