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);

我需要这个幻灯片动画永远持续下去。

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

0 个答案: