使用jQuery的4个图像的无限循环

$(document).ready(function () {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
});

它更像是一个带jQuery的游乐场.好吧,首先我希望第一个图像淡入,然后是第二个图像然后是最后一个.在此之后,我希望所有图像在加载后淡出.

但我正在考虑两个新问题：

>创建一个无限循环
>使用3个以上的图像,但一次只显示3个(我意识到这可能会影响id被改成其他的东西)

有任何想法吗？

我不会在这里发布我是如何尝试实现循环的,只有一个有趣的方法：

$(document).ready(function () {
    function runPics() {
    $('#imgone').hide().delay(500).fadeIn(1000).delay(4500).fadeOut(500);
    $('#imgtwo').hide().delay(1500).fadeIn(1000).delay(3500).fadeOut(500);
    $('#imgthree').hide().delay(2500).fadeIn(1000).delay(2500).fadeOut(500);
    } interval = setInterval(runPics, 3500);
});

这段代码很糟糕,对吗？ ：P

$(function(){
    var images = ['#imgone', '#imgtwo', '#imgthree'],
         imgIx = 0;

    (function nextImage(){
        $(images[imgIx++] || images[imgIx = 0, imgIx++]).hide().delay(500).fadeIn(1000).delay(1000).fadeOut(500, nextImage);
    })();
});

jsfiddle

或者显示随机图像,一次3个：

<div id="parent">
    <div id="imgone"   style="display:none;">one</div>
    <div id="imgtwo"   style="display:none;">two</div>
    <div id="imgthree" style="display:none;">three</div>
    <div id="imgfour"  style="display:none;">four</div>
    <div id="imgfive"  style="display:none;">five</div>
    <div id="imgsix"   style="display:none;">six</div>
</div>

<script>
$(function(){
    var images = ['#imgone', '#imgtwo', '#imgthree', '#imgfour', '#imgfive', '#imgsix'],
        parent = $('#parent');

    (function nextImage(){
        var imgs = images.slice();
        for(var i=0; i<3; i++){
            parent.append(
                $(imgs.splice(0|Math.random() * imgs.length, 1)[0]).hide().delay(1000*i+500).fadeIn(1000).delay(4500-(1000*i)).fadeOut(500, i ? $.noop : nextImage)
            );
        }
    })();
});
</script>

jsfiddle