Please - no jQuery.
Function 1 causes an image to appear (CSS3 animation).
Function 2 then slides up a caption on the bottom of this slide (CSS3 animation).
Function 3 then slides down the caption (CSS3 animation).
Then the process needs to be repeated.
My question: how to put these functions in a continuous loop with a delay in between every function.
HTML code
<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 code
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';
}
Use the setTimeout
method at the end of each function to start the next after a delay:
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);
}
The most literal example:
setInterval(function() {
nextMove();
setTimeout(function() {
nextMove2();
setTimeout(nextMove3, 5000)
}, 5000);
}, 15000);
So every 15 seconds start the loop. Execute the first function, wait 5 seconds, execute the 2nd, wait 5 seconds, and execute the third (so after that, you wait ~5 seconds for the first again).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.