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

我已经使用了一些带有一些新JS的CSS来获得一个随机滑块，你觉得它很好吗？

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


});

Answer 2

$('#container img').hide();
var myFadeIn = function () {
    var randomnumber = Math.floor(Math.random() * $("#container").children().length);
    $("#container > img:eq(" + randomnumber + ")")
        .fadeIn(1000)
        .delay(2000)
        .fadeOut(1000, myFadeIn);
};
myFadeIn();

此代码适用于FadeIn / FadeOut的命名函数（通过递归调用）。

褪色图像进出，间隔混乱

2 个答案: