简单的广告转换器 - each() 循环不会延迟 ()

Question

我正在尝试创建在给定时间后简单地更改图片的广告框。我使用 each() 循环来一个接一个地隐藏和显示图像，但我得到的是所有图片的相同时间效果。知道如何解决这个问题吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="advert.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        .advert{
            position: relative;
        }
        .advert img{
            position: absolute;
            /*visibility: hidden;*/
        }
    </style>
</head>

<body>
    <div class="advert">
        <img src="img/img1.jpg" alt="Smiley face" height="" width="">
        <img src="img/img2.jpg" alt="Smiley face" height="" width="">
        <img src="img/img3.jpg" alt="Smiley face" height="" width="">
    </div>
</body>

<script>
    $(function(){
        function simpleAdvert(){
            var section = $('.advert');
            var images = section.find('img');
            images.each(function(){
                $( this ).fadeToggle(5000).fadeToggle(5000).delay(10000);
                console.log($( this ));
            });
        }

        simpleAdvert();
    });
</script>

</html>

Answer 1

你应该在fadeToggle方法之前调用delay，如果你想一张一张地显示图像，你可以使用集合中元素的索引：

// using fadeIn() method
images.each(function(index) {
    // since the indices are zero-based 
    // the first element is shown without delay
    // you can add 1 to the index: 10000 * ++index
    $(this).hide().delay(10000 * index).fadeIn(5000);

一条建议：

function simpleAdvert() {
    var section = $('.advert');
    var images = section.find('img').hide();
    images.each(function(index) {
        $(this).delay(10000 * index).fadeIn(5000);
    });
}

Answer 2

.each(function) 立即为数组中的每个项目调用函数，这就是时间效应应用于所有项目而不是按照您的预期进行的原因。要在循环中将图片获取到 show/hide，您需要类似 setInterval 的东西，它会重复调用一个函数。这应该有效：

$(function(){
    var timeToShow = 750;
    var timeToFade = 250;
    var timeTotal = timeToShow + timeToFade;

    function simpleAdvert(){
        var section = $('.advert');
        var images = section.find('img');
        var index = 0;
        images.hide();
        $(images[0]).show();
        setInterval(function() {
            var next = (index + 1) % images.length;
            $(images[index]).fadeToggle(timeToFade);
            $(images[next]).fadeToggle(timeToFade);
            index = next;
        }, timeTotal);
    }

    simpleAdvert();
});

基本上这会隐藏除第一个图像之外的所有图像，然后淡出显示的图片并在一定间隔内淡入下一张图片。

Answer 3

这是 concrete_d 对工作脚本的一个小扩展（已接受的答案）。 + 没有动画的自定义时间延迟 + 和脚本开始时的随机幻灯片

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="advert.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        .advert{
            position: relative;
        }
        .advert img{
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="advert">
        <img src="img/img1.jpg" alt="Smiley face" height="" width="">
        <img src="img/img2.jpg" alt="Smiley face" height="" width="">
        <img src="img/img3.jpg" alt="Smiley face" height="" width="">
    </div>
</body>

<script>
$(function(){
    var timeToShow = 500;
    var timeDelay = 5000;
    var timeToFade = 500;
    var timeTotal = timeToShow + timeToFade + timeDelay;
    var minimum = 0;
    var maximum =  $('.advert').find('img').length - 1;
    var randomnumber = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
    console.log(randomnumber);
    function simpleAdvert(){
        var section = $('.advert');
        var images = section.find('img');
        var index = randomnumber;
        images.hide();
        $(images[randomnumber]).show().delay(timeDelay);
        setInterval(function() {
            var next = (index + 1) % images.length;
            $(images[index]).fadeToggle(timeToFade);
            $(images[next]).fadeToggle(timeToFade);
            index = next;
        }, timeTotal);
    }

    simpleAdvert();
});
</script>

</html>

简单的广告转换器 - each() 循环不会延迟 ()

simple advert changer - each() loop won't delay()

javascript

each

loops

delay