gpt4 book ai didi

javascript - 简单的广告更改器 -each() 循环不会延迟()

转载 作者:行者123 更新时间:2023-12-02 16:16:01 25 4
gpt4 key购买 nike

我正在尝试创建广告框,它会在给定时间后简单地更改图片。我使用each()循环来隐藏和显示一个又一个的图像,但我得到的只是对所有图片的相同时间效果。知道如何解决这个问题吗?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="advert.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
.advert{
position: relative;
}
.advert img{
position: absolute;
/*visibility: hidden;*/
}
</style>
</head>

<body>
<div class="advert">
<img src="img/img1.jpg" alt="Smiley face" height="" width="">
<img src="img/img2.jpg" alt="Smiley face" height="" width="">
<img src="img/img3.jpg" alt="Smiley face" height="" width="">
</div>
</body>

<script>
$(function(){
function simpleAdvert(){
var section = $('.advert');
var images = section.find('img');
images.each(function(){
$( this ).fadeToggle(5000).fadeToggle(5000).delay(10000);
console.log($( this ));
});
}

simpleAdvert();
});
</script>

</html>

最佳答案

.each(function) 立即为数组中的每个项目调用函数,这就是为什么时间效应应用于所有项目而不是执行您期望的操作。要让图片在循环中显示/隐藏,您需要类似 setInterval 之类的东西,它会重复调用函数。这应该有效:

$(function(){
var timeToShow = 750;
var timeToFade = 250;
var timeTotal = timeToShow + timeToFade;

function simpleAdvert(){
var section = $('.advert');
var images = section.find('img');
var index = 0;
images.hide();
$(images[0]).show();
setInterval(function() {
var next = (index + 1) % images.length;
$(images[index]).fadeToggle(timeToFade);
$(images[next]).fadeToggle(timeToFade);
index = next;
}, timeTotal);
}

simpleAdvert();
});

本质上,这会隐藏除第一个图像之外的所有图像,然后淡出显示的图片并每隔一定时间淡入下一张图片。

关于javascript - 简单的广告更改器 -each() 循环不会延迟(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29586320/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com