Question

我在html中播放幻灯片，每隔10秒播放客户的广告，但第一个广告始终显示为20秒。我认为这是因为setInterval从10秒开始，因此select语句仅在10秒后执行，因此第一个广告的时间加倍。

我需要setInterval在0秒开始。

这是我的setInterval：

<script>
setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow');
},  10000);
</script>

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us">
<head>
<style>
body {
margin: 0;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script>
function handler() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow');
}
handler();
setInterval(handler, 10000);
</script>

</head>
<body>
<?PHP
echo "<div id='slideshow'>";
//Getting ads from the database
require_once('connect_pdo.php');
$sqlst = $conn->prepare("SELECT ads from adlist");
$sqlst->execute();
while($resultst = $sqlst -> fetch()){
$adlist = $resultst["Monday_Morning"];
echo "<div class='slideshow'>";
//Display ad as an image
//<object data='/$adlist'></object>
echo "<iframe id='frame' src='/$adlist' style='position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999; autoplay'>
Your browser doesnt support iframes
</iframe>";
echo "</div>";
}
echo "</div>";
?>

</body>

</html>

Answer 1

将callback定义为函数并调用它。同时将其作为setInterval

的第一个参数传递

＆＃13;

function handler() {
  alert(); //Just for demo
  $('#slideshow > div:first')
    .fadeOut(0)
    .next()
    .fadeIn(0)
    .end()
    .appendTo('#slideshow');
}
handler();
setInterval(handler, 10000);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

＆＃13;

Answer 2

只需在间隔设置前调用一次回调。

设置setInterval在第一次回调之前等待给定的延迟时间。

从0开始setInterval循环

2 个答案: