如何正確使用setInterval（）？ - jQuery

Question

我正在研究某種自動幻燈片，我需要一些關於setInterval（）的幫助。 據我所知，setInterval（）使函數無限重復，所以我認為setInterval（）是我需要的。 這是我正在做的事情：

HTML

<div id="container">
<div id="background_top" class="slide"></div>
<div id="slidephoto"></div>
</div>

這是CSS

#container {
position:absolute;
width:100%;
height:618px;
overflow:hidden;
}
#background_top {
position:absolute;
background-image:url(images/basvurubg.jpg);
background-size:100%;
background-repeat:no-repeat;
width:100%;
height:618px;
z-index:0;
margin-left:100%;
}
#slidephoto {
position:absolute;
background-image:url(images/bgtop2.jpg);
background-size:100%;
background-repeat:no-repeat;
width:100%;
height:618px;
z-index:-1;
left:0%;
}

和jQuery

$('.slide').delay(5000).load("index.html", function() {
$('.slide').each( function() {
    if ($(this).offset().left < 0) {
        $(this).css("left", "150%");
    }
});
$(this).animate({
     left: '-100%'
 }, 500);
 $(this).delay(5000).animate({
     left: '100%'
 }, 550);
 $(this).delay(5000).animate({
     left: '-100%'
 }, 500);
 $(this).delay(5000).animate({
     left: '100%'
 }, 550);

 if ($(this).next().size() > 0) {
     $(this).next().animate({
         left: '0%'
     }, 500);
 } else {
     $(this).prevAll().last().animate({
         left: '0%'
     }, 500);
 }
});

代碼工作正常，就像我想要的那樣。 但我希望這張幻燈片永遠持續下去。 我不知道該怎么辦。 我試圖通過復制這部分代碼重復我想要的動畫。 然后我刪除了最后兩個（這個）部分並嘗試添加setInterval（）但是沒有工作：

$(this).animate({
 left: '-100%'
 }, 500);
$(this).delay(5000).animate({
 left: '100%'
}, 550);
$(this).delay(5000).animate({
  left: '-100%'
}, 500);
$(this).delay(5000).animate({
 left: '100%'
}, 550);

我需要這個幻燈片動畫永遠持續下去。

Answer 1

我這里有兩個解決方案：

選項1（使用setInterval ）：

 $('.slide').delay(500).load("index.html", function() { var _this = $(this); loop(_this); }); function loop(thisone) { var _this = thisone; setInterval(function() { _this.animate({ left: '-100%' }, 1000); _this.delay(1000).animate({ left: '100%' }, 1000); }, 3000); } 

 #container { position: absolute; width: 100%; height: 618px; overflow: hidden; } #background_top { position: absolute; background-image: url(http://placehold.it/200x100); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: 0; margin-left: 100%; } #slidephoto { position: absolute; background-image: url(http://placehold.it/350x200); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: -1; left: 0%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="background_top" class="slide"></div> <div id="slidephoto"></div> </div> 

選項2（使用setTimeout ）：

 $('.slide').delay(500).load("index.html", function() { var _this = $(this); loop(_this); }); function loop(thisone) { var _this = thisone; _this.animate({ left: '-100%' }, 1000); _this.delay(1000).animate({ left: '100%' }, 1000); setTimeout(function() { loop(thisone); }, 3000); } 

 #container { position: absolute; width: 100%; height: 618px; overflow: hidden; } #background_top { position: absolute; background-image: url(http://placehold.it/600x600); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: 0; margin-left: 100%; } #slidephoto { position: absolute; background-image: url(http://placehold.it/750x750); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 618px; z-index: -1; left: 0%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="background_top" class="slide"></div> <div id="slidephoto"></div> </div>