javascript - 图像淡入和淡出，间隔困惑

我在某个div处随机将图像淡入和淡出。

这是div html代码：

<div id="container" class="container">
    <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" />
    <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg" />
    <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg" />
</div>

这是javascript：

$('.container img:gt(0)').hide();

$(function () {

    var className = ".container";
    var suffix = " :first-child";
    var path = className.concat(suffix);
    setInterval(function () {
        var randomnumber = Math.floor(Math.random() * $("#container").children().length);
        console.log($("#container").children().length);
        console.log(randomnumber);
        // Fade out the first element and fade in the next and then move the elements

        jQuery(path).fadeOut(1000, function () {
            $("#container > img:eq(" + randomnumber + ")").fadeIn(1000);
            jQuery(className).append($(this).clone());

            jQuery(this).remove();
        });
    },
    3000);
});

它基本上可以工作，但是我每隔3000毫秒就会褪色，并且当当前图像淡出时新图像开始淡入。

但是有时间隔会关闭：它不会在3秒后开始褪色，或者由于某种原因它会停留在空白的白色屏幕上。我不确定为什么要这么做。有任何想法吗？

如果您仔细看一下jsfiddle，您会发现它不一致：http://jsfiddle.net/x300a41n/18/

谢谢。

最佳答案

我已经使用了一些CSS和一些新的JS来达到随机滑动条，您认为这很好吗？

http://jsfiddle.net/x300a41n/19/

$(function () {

    var nImages = $("#container").children().length;
    var currentImage = 1;

    setInterval(function () {

        var randomnumber = Math.floor(Math.random() * nImages);
        randomnumber -= 1;

        if ( currentImage == randomnumber )
            randomnumber = ( randomnumber < nImages ) ? randomnumber + 1 : 0;

        currentImage = randomnumber;
        $('#container img').fadeOut(1000);
        $('#container > img:eq('+randomnumber+')').fadeIn(1000);

    },3000);


});

关于javascript - 图像淡入和淡出，间隔困惑，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26243143/