Question

我需要您的帮助。我在一个容器div中有2个div，其ID为“ rfsh-sidebar-2”。我每10秒设置一个函数，它从第一个div更改为第二个div。但这是一个循环（第二个div结束其10秒时，它会到达第一个div，依此类推。嗯，我需要在调用最后一个div（第二个div）时停止该循环。

我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Ad rotation</title>
</head>

<body>
<div id="rfsh-sidebar-2">
<!-- div1 -->
<div>
    <div style="background-color: aqua; width: 300px; height: 250px;">
    </div>
</div>

<!-- div2 -->
<div id="stop">
    <div style="background-color: orangered; width: 300px; height: 
    250px;">
    </div>
</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript">

$("#rfsh-sidebar-2 > div:gt(0)").hide();
setInterval(function() { 
$('#rfsh-sidebar-2 > div:first')
.fadeOut(1)
.next()
.fadeIn(1000)
.end()
.appendTo('#rfsh-sidebar-2');
},  4200);


</script>
</body>
</html>

Answer 1

您可以使用clearInterval function。

您必须为其声明一个变量：

var interval = setInterval(function() { 
$('#rfsh-sidebar-2 > div:first')
.fadeOut(1)
.next()
.fadeIn(1000)
.end()
.appendTo('#rfsh-sidebar-2');
},  4200);

然后：

clearInterval(interval);

希望这会有所帮助！

1 个答案: