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

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

// 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）立即为数组中的每个项调用函数，这就是时间效果应用于所有项而不是按预期执行的原因。要让图片在循环中显示/隐藏，您需要像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（）循环不会延迟（）

3 个答案: