如何使我的脚本循环答案

【问题标题】：How to make my script loop如何使我的脚本循环
【发布时间】：2013-06-17 14:30:13
【问题描述】：

我创建了一个以一张图片结尾的图片滑块，但现在我想更进一步，让它循环播放。

这是我在 head 标签中的代码

<style>
#picOne, #picTwo, #picThree, #picFour, #picFive{
position:absolute;
display: none;
}

#pics {
width:500px;
height:332px;
}
</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() { 
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
});
</script>

这是在正文代码中实现的地方

<div id="pics">
<center>
<img src="img/dolllay.jpg" width="500" height="332" id="picFive" />
<img src="img/dye.jpg" width="500" height="332" id="picTwo" />
<img src="img/dollsit.jpg" width="500" height="332" id="picThree" />
<img src="img/heirloom.jpg" width="500" height="332" id="picFour" />
<img src="img/heritage.jpg" width="500" height="332" id="picOne" />
</center>
</div>

我可以把它变成一个函数然后循环吗？我可以得到任何指导吗？非常感谢

【问题讨论】：

仅供参考 <center> 大约 100 年前已被弃用。
建议：将picOne picTwo .... 更改为pic1 pic2 .... 这样您就可以使用变量$('#pic'+i)
另外，对于您的 img 样式，请考虑创建 class='pic' 而不是通过 ID 调用所有样式。 #picOne, #picTwo, ... 变为 .pic{
谢谢j0861！还有戴夫·斯塔基

标签： javascript jquery slider rotator

【解决方案1】：

每个人都在回答问题，但没有解决问题。

当然，你可以在它周围放一个循环包装器（最好是不终止的），但为什么不直接编程呢？为什么有所有硬编码的时间，为什么不让它更健壮？

尝试像这样重写您的代码。它使修改您循环播放的图片变得更加容易：

var pictures = ["picOne", "picTwo", "picThree", "picFour", "picFive"];
var index = 0;

var displayImage = function() {
    if (index == pictures.length) { return; }

    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

displayImage();

然后，如果您想循环返回，您只需调整 displayImage 函数：

var displayImage = function() {
    if (index == pictures.length) { index = 0; }
    $("#" + pictures[index++]).fadeIn(1500).delay(3500).fadeOut(1500, displayImage);
};

TRY IT 在 jsfiddle

编辑

在仔细阅读您的问题后，我发现我的原始答案并没有完全满足您的需求。您已将其设置为每五秒，一个会淡出，另一个会淡入。目前，我的需要 6.5 秒，因为我的都是按顺序运行而不是同时运行。要使其接近匹配您的，只需将 1500 更改为 750：

    $("#" + pictures[index++]).fadeIn(750).delay(3500).fadeOut(750, displayImage);

这将花费适当的时间。它与您的略有不同，因为一个在另一个淡入之前一直淡出。另一种方法是实际跳过淡入并保持淡出。这与您的外观更接近。

    $("#" + pictures[index++]).show().delay(3500).fadeOut(1500, displayImage);

或者，制作一个非常小的淡入淡出，以帮助减少新图像的闪烁：

    $("#" + pictures[index++]).fadeIn(100).delay(3500).fadeOut(1400, displayImage);

最终编辑（真的！）

好的，为了让fadeIn 和fadeOut 同时可靠地工作，解决方案是两者都不使用。我转而使用animate。结果，我不得不完全重写displayImage 函数，但这正是你所需要的：

var displayImage = function () {
    if (index == pictures.length) {
        index = 0;
    }

    $("#" + pictures[index]).show().delay(3500).animate({
        opacity: 0.2
    }, {
        step: function (now) {
            var idx = (index + 1) % pictures.length;
            var val = 1.2 - now;
            $("#" + pictures[idx]).show().css("opacity", val);
        },
        complete: function () {
            $("#" + pictures[index++]).hide();
            displayImage();
        }
    });
};

这样做是将序列移动到“show->fadeIn and Out”而不是“fade in -> show -> fade out”。为了让你的过渡平滑，我只将它淡出到 0.2 而不是 0。step 函数是同时淡入另一个函数。看到新照片后，我就完全隐藏了旧照片。

Here 是它的工作小提琴。

【讨论】：

+1 这很好，因为它可以保证您永远不会失去同步并让两张照片一起显示。我并没有真正阅读OP问题的第一句话！
哇！非常感谢您的所有编辑。我很高兴能实现这一点。
我怎样才能更进一步并添加可点击的开/关？
查看最新的小提琴：jsfiddle.net/HKLGJ/2。基本上，添加一个复选框，并检查if (index == pictures.length) 子句中复选框的状态。我还充分更新了您的 jquery 版本以使其使用 jqueryUI，并使复选框看起来像一个漂亮的切换框。

【解决方案2】：

$(document).ready(function() { 
   setInterval(example, 10000); // repeat every 10 seconds
});

function example() {
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
}

【讨论】：

【解决方案3】：

更好的方法是给每个pic 一个相同的类，例如'fadeinout'。这意味着您在添加/删除更多图片时不必重新编写代码。

例如

<img id="picFive" class="fadeinout" ....  
/* not sure if they are even <img>s but whatever they are*/

那就做吧

$(document).ready(function() { 
    beginFades();
});

function beginFades() {
    $('.fadeinout').each( function(i,el) {  // find all elements with fadeinout
        //for each one, trigger the start of the fading after i*5000 milliseconds
        //i is the index of the element as it was found by jQuery - this will be in
        //document order (which actually may not be what you have but I'm guessing        
        //it is)
        setTimeout(function(){
            makeImgFadeInOut($(el))
        }, i*5000);
    });
}


function makeImgFadeInOut(el) {
    //trigger a single fadeIn, fadeOut.
    //But add a callback function to the end of fadeOut which retriggers the whole        
    //thing
    el.fadeIn(1500).delay(3500).fadeOut(1500, function(){makeImgFadeInOut(el);});
}

WORKING DEMO (WITH DIVS)

【讨论】：

谢谢！这似乎比我所拥有的要简单得多，但是当我在我的网站上实现它时，什么都没有显示
我在上面的另一组代码中遇到了类似的问题。
hmm 我的回答并不真正关心您一次只显示一张图像。斯科特的回答可能是最好的，因为它一次保证 1 个。
@user2252457 请查看我对答案的最新更新。它应该为您提供您所需要的 - 一个显示五秒钟的图像，然后在第二个图像淡入时平滑淡出。

【解决方案4】：

您可以使用setInterval 将其永久循环，或使用setTimeout 将其循环特定持续时间。

<script type="text/javascript">

$(document).ready(function() { 
     setInterval(ImageSlider, 1000);
});

 function ImageSlider() {
    $('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picThree').delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFour').delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
    $('#picFive').delay(20000).fadeIn(1500).delay(3500);
 }

</script>

【讨论】：

您也可以使用 ClearTimeout 或 ClearInterval 来完成循环。 w3schools.com/jsref/met_win_cleartimeout.asp w3schools.com/jsref/met_win_clearinterval.asp
我在哪里实现这个？下面的 document.ready?
@user2252457 - 在 document.ready 中添加 setInterval - 函数声明 (ImageSlider) 应该在 document.ready() 函数之外
我这样做对吗？
@user2252457 - 您错过了准备文档的烦人功能。我已经编辑了我的答案以准确包含您需要的内容，复制并粘贴。

【解决方案5】：

如果你想完全控制你的元素，你可以使用这个：

 var elements = [{
   el: '#pic1',
   delay: 3500,
   fadeIn: 1500,
   fadeOut: 1500
},
{
  el: '#pic2',
  delay: 3500,
  fadeIn: 1500,
  fadeOut: 1500
 }
 //... other elements
]
var index = null;
(function loop(){
  index = index || 0;
  index = index % elements.length();
      $(elements[index].el).fadeIn(elements[index].fadeIn, function(){
      $(this).delay(elements[index].delay)
             .fadeOut(elements[index].fadeOut, function(){
                  index++;
                  window.setTimeout(loop, 5000);
              });
   })();

编辑：忘记执行循环函数的第一次迭代并删除循环内无用的索引调用

关于这个循环如何工作的好处是它不使用 SetInterval 函数。并且循环内的代码需要在再次迭代之前完成它在里面所做的事情。（如果您单击其他选项卡并返回轮播，您将不会遇到这个可怕的错误）如果您需要较少的配置，@ElRoconno 的答案也很好

【讨论】：

我喜欢配置每个延迟、fadeIn 和fadeOut 的想法，但是为什么要设置setTimeout？并且 index 不需要作为函数参数。
设置超时用于循环通过相同的函数它基本上是一个“更好的 setInterval” 你是对的，索引是无用的，因为它可以在循环函数中创建。并且由于示例中的图像在更改之前在屏幕上停留了 5 秒，我认为这是相关的，我可以放置一个 (function(){ window.setTimeout(arguments.callee, 5000); })();而不是 window.setInterval(function(){},5000);
抱歉，澄清一下，我的意思是“为什么有一个 setTimeout”？为什么要添加 5 秒延迟？那条线可能只是loop()，对吧？ OP 中的 5 秒延迟是因为所有东西都会同时自动触发。通过使用第二个参数来淡出，你不需要它。
为了澄清@user2252457 的问题，他想要这样：“淡入第一张图像”>“延迟 3.5 秒”>“淡出”>“等待 5 秒”>重做序列.我做了一个 setTimeout 等待 5 秒，因为它比调用另一个延迟要快，因为延迟仅适用于已经排队的元素，并且在第一个 fadeIn 之前放置延迟将迫使我首先管理初始化，延迟在内部使用 setTimeout。认为这是相关的:)

【解决方案6】：

使用任何一个-

setInterval() - 以指定的时间间隔一遍又一遍地执行一个函数

setInterval(function(){alert("Hello")},3000);

setTimeout() - 在等待指定的毫秒数后执行一次函数。

setTimeout(function(){alert("Hello")},3000);

What is the difference between both setInterval and setTimeout

对于您来说，setTimeout 可能不起作用，因为它只会在延迟后运行一次，并且 setInterval 将继续进行连续重复调用，直到调用 window.clearInterval(intervalVariable)

【讨论】：

【解决方案7】：

我在 jsfiddler here 上创建了一个示例。基本上你不必一次做这个。只需将整个图像集合作为一个数组并循环它们。希望这会有所帮助

$(document).ready(function () {
var arr = $('.pics')
arr.hide();

$(arr[0]).fadeIn(1500).delay(3500).fadeOut(1500);

var index = 1;
var maxIndex = arr.length - 1;

setInterval(function () {
    /*arr.hide();
     var pic = $(arr[index]);
     pic.show();
     */
    var pic = $(arr[index]);
    pic.fadeIn(1500).delay(3500).fadeOut(1500);


    index++;
    if (index >= maxIndex) {
        index = 0;
    }
}, 6500);

});

【讨论】：

【解决方案8】：

这里真的不需要setInterval，因为您可以使用.fadeOut() 的内置回调，也不必枚举图像数组。你可以做一些简单的事情：

var idx = 0;
fade();
function fade() {
    if (idx >= $('img').length) idx = 0;
    $('img').eq(idx).fadeIn(1500).delay(3500).fadeOut(1500, fade);
    idx++;
}

jsFiddle example

【讨论】：