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

Question

我正在对某个 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/

谢谢。

Answer 1

我使用了一些 CSS 和一些新的 JS 来实现随机 slider ，你认为这很好吗？

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


});