gpt4 book ai didi

Javascript - 循环 3 个函数,每个函数之间有延迟

转载 作者:太空宇宙 更新时间:2023-11-03 23:52:38 25 4
gpt4 key购买 nike

请不要使用 jQuery。

函数 1 导致图像出现(CSS3 动画)。

然后函数 2 向上滑动这张幻灯片底部的标题(CSS3 动画)。

函数3然后向下滑动标题(CSS3动画)。

然后需要重复这个过程。

我的问题:如何将这些函数置于连续循环中,并在每个函数之间设置延迟。

HTML代码

<div id="slider">

<!-- Sildes
img_noshow means opacity:0;display:none;
img_show means opacity:1;
an_movein means a fade in effect CSS3
-->
<img id="img_1" class='img_show' src="/images/c1.jpg" style='width:960px;'/>
<img id="img_2" class='img_noshow' src="/images/c2.jpg" style='width:960px;'/>
<img id="img_3" class='img_noshow' src="/images/c3.jpg" style='width:960px;'/>
<img id="img_4" class='img_noshow' src="/images/c4.jpg" style='width:960px;'/>
<div id="slider_caption">
<p id="slider_p1" class="an_slideup"><a href="#one">This is the text going with the slide 1.</a></p>
<p id="slider_p2" class="img_noshow"><a href="#one">This is the text going with the slide 2.</a></p>
<p id="slider_p3" class="img_noshow"><a href="#one">This is the text going with the slide 3.</a></p>
<p id="slider_p4" class="img_noshow"><a href="#one">This is the text going with the slide 4.</a></p>
</div>
</div>

JavaScript代码

slide = 1;//global
function nextMove(){
slide++;
if(slide > 4){
slide = 1;
}
//img_noshow means opacity:0;display:none;
//img_show means opacity:1;
//an_movein means a fade in effect
for(i=1;i<5;i++){

document.getElementById('slider_p'+i).className = 'img_noshow';
if(i != slide){
document.getElementById('img_'+i).className = 'img_noshow';
}
else{
document.getElementById('img_'+i).className = 'an_movein';
}
}
}


function nextMove2(){
document.getElementById('slider_p'+slide).className = 'an_slideup';
}

function nextMove3(){
document.getElementById('slider_p'+slide).className = 'an_slidedown';
}

最佳答案

在每个函数的末尾使用setTimeout 方法延迟后开始下一个:

function nextMove(){
//...all dat code
window.setTimeout(nextMove2, 500);
}

function nextMove2(){
document.getElementById('slider_p'+slide).className = 'an_slideup';
window.setTimeout(nextMove3, 500);
}

function nextMove3(){
document.getElementById('slider_p'+slide).className = 'an_slidedown';
window.setTimeout(nextMove, 500);
}

关于Javascript - 循环 3 个函数,每个函数之间有延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19523491/

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