背景: 下面的脚本用于 HTML slider 。 Jquery 被编写为每 10 秒旋转一次幻灯片。打开或刷新页面时，第一个广告显示 20 秒。
知道为什么吗？
这是我的脚本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<title>Current Ads Display</title>
<style>
object {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: 100%;
/* Set up positioning */
position: fixed;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"> </script>
<script>
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(0)
.end()
.appendTo('#slideshow');
}, 10000);
<body>
<?PHP
echo "<div id='slideshow'>";
//Getting ads from the database
require_once('connect_pdo.php');
$sqlst = $conn->prepare("SELECT `adslist` FROM ADS");
$sqlst->execute();
while($resultst = $sqlst -> fetch()){
$adlist = $resultst["adslist"];
echo "<div class='slideshow'>";
//Display ad as an image
//<object data='/$adlist'></object>
echo "<object data='/$adlist'></object>";
echo "</div>";
}
echo "</div>";
?>
</body>
</html>
最佳答案
移除外部的隐藏选项，并将其置于有效的区间内。
<script>
setInterval(function() {
$('#slideshow > div:first').fadeOut(0).next().fadeIn(0).end().appendTo('#slideshow');
$("#slideshow > div:gt(0)").hide();
}, 10000);
关于javascript - 带有 jquery 的 HTML slider 显示第一张幻灯片的时间太长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37387936/