CODEWITHSUNDEEP
javascriptweb
tsepehr
tsepehr

Reputation: 147

Javascript repeating function

recently I've tried to Design a slider Using Javascript and HTML . Here is what I have in HTML :

each slide is a division

<div id="sliderHolder">
<div id="slide1">Content For Slider1 </div>
<div id="slide2">Content For Slider2 </div>
<div id="slide3">Content For Slider3 </div>
</div>

And Here Is JS scripts :

function show_slider(){
document.getElementById('slide1').style.display="none";
document.getElementById('slide2').style.display="block";
document.getElementById('slide3').style.display="none";
}
function show_slider2(){
document.getElementById('slide1').style.display="none";
document.getElementById('slide2').style.display="none";
document.getElementById('slide3').style.display="block";
}
function show_slider3(){
document.getElementById('slide1').style.display="block";
document.getElementById('slide2').style.display="none";
document.getElementById('slide3').style.display="none";
}
window.onload = function() {
setTimeout(show_slider, 8000);
setTimeout(show_slider2, 16000);
setTimeout(show_slider3, 24000);
}

I'm New to JavaScript . This Works for 1 round of 24 seconds and shows each slide for 8 second and in the end shows the first slide . But what I'm looking for is to repeat the whole thing again after round finishes so the slider will continue forever .

Can You Please Help Me Out ??!

MORE To Say :

I'm not sure if I can write window.onload = function() inside another function . but I did something Like below After function show_slider3() :

function repeat() {
  window.onload = function() {
    setTimeout(show_slider, 8000);
    setTimeout(show_slider2, 16000);
    setTimeout(show_slider3, 24000);
      }
}

and I added setTimeout(repeat, 25000); to window.onload = function() but it did not help me out .

Special Thanks ;

Upvotes: 0

Views: 121

Answers (3)

Domain
Domain

Reputation: 11808

Here is simple code with no requirement of function for each div, just added class "slide" to each div

<div id="sliderHolder">
   <div id="slider_1" class="slide">Content For Slider1 </div>
   <div id="slider_2" class="slide" style="display:none;">Content For Slider2 </div>
   <div id="slider_3" class="slide" style="display:none;">Content For Slider3 </div>
</div>

And here is javascript code( no jquery)

var s=1;// start div
function show_slider() {
    var cusid_ele = document.getElementsByClassName('slide');//getting all div by class name
    console.log(s);
    for (var i = 0; i < cusid_ele.length; ++i) {
        var item = cusid_ele[i].style.display="none";// hiding all div of class "slide"
    }
    s++;
    if( s>3 )// if reach at last div, set it to first again
        s = 1;
    document.getElementById('slider_'+s).style.display="block";//showing next div

}
window.setInterval(show_slider, 1000);

here is jsfiddle demo

Upvotes: 0

Logo
Logo

Reputation: 387

You can call the function on load, then run the function again in an interval.

window.onload = loop();
function loop() {
setTimeout(show_slider, 8000);
setTimeout(show_slider2, 16000);
setTimeout(show_slider3, 24000);
setTimeout(loop, 24000);
}

Upvotes: 1

Tom Rees
Tom Rees

Reputation: 671

You should use the function window.setInterval to queue up a function which will run every eight seconds, eg.

var activeSlider = 0;
var sliders = [ "slide1", "slide2", "slide3" ];
function showNextSlider() {
    document.getElementById('slide1').style.display="none";
    document.getElementById('slide2').style.display="none";
    document.getElementById('slide3').style.display="none";
    var activeSliderName = sliders[ ++activeSlider % sliders.length ];
    document.getElementById(activeSliderName).style.display="block";
}
window.setInterval( showNextSlider, 8000 );

Upvotes: 0

Related Questions