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

Question

我有下一个代码:

$(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的游乐场.好吧,首先我希望第一个图像淡入,然后是第二个图像然后是最后一个.在此之后,我希望所有图像在加载后淡出.

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

1. 创造一个无限循环

2. 使用超过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

Answer 1

我会做这样的事情:

$('document').ready(function() {
    var $imgs = $('#slideshow > img'), current = 0;

    var nextImage = function() {
        if (current >= $imgs.length) current = 0;
        $imgs.eq(current++).fadeIn(function() {
            $(this).delay(3000).fadeOut(nextImage);
        })
    };
    nextImage();
});

小提琴: http ://jsfiddle.net/JbrXd/4/

Answer 2

尝试:

$(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