Home/ Questions/Q 8388467
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T18:28:43+00:00

I had to write my own code of a couple of lines for displaying

  • 0

I had to write my own code of a couple of lines for displaying slideshow on my websites splashpage. I couldnt use any plugin as I had designed the website on HTML5 and css3 and images were synchronized to resize with the browser. Now, coming to the actual problem, the last image takes double time as taken by
each image in the list. Below is the HTML and the javascript pasted.

HTML

  <div id="backgrounds">
    <div class="bgs" style="z-index:1000;">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_nop.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:999; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_jkl.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:998; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_ghi.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:997; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_def.jpg" alt="" class="background" />
    </div>

    <div class="bgs" style="z-index:996; display: none">
        <!--<p style="z-index:999; margin:0; margin-top:300px; color:red; position:absolute;">Let the Feeling Wrap Around</p>--> 
        <img src="images/main_abc.jpg" alt="" class="background" /> 
    </div>
  </div>

JAVASCRIPT

    var count = 0;
    var repeatCount = 0;
    var backgrounds = $('.bgs').length;
    function startSlideShow() {
        myRecFunc = setInterval(function () {
            if (count == backgrounds) {
                $('.bgs').eq(0).stop(true, true).hide(1000, 'easeOutExpo');
                $('.bgs').eq(backgrounds - 1).show(1000, 'easeOutExpo');
            }
            if (count < backgrounds) {
                $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
                $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
                count++;
            }
            else {
                count = 0;
                repeatCount++;
            }
        }, 1000);
    }
    startSlideShow();

The first if() in the code above is the one I added to handle the situation I stated on top, thanks in advance for the help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a condition where you do nothing for a whole interval which is your “else” case. Try moving that check inside so that it happens immediately.

    var count = 0;
var repeatCount = 0;
var backgrounds = $('.bgs').length;
function startSlideShow() {
    myRecFunc = setInterval(function () {
        $('.bgs').eq(count).stop(true, true).show(1000, 'easeOutExpo');
        $('.bgs').eq(count - 1).stop(true, true).hide(1000, 'easeOutExpo');
        count++;
        if (count === backgrounds) {
            count = 0;
            repeatCount++;
        }
    }, 1000);
}
startSlideShow();​
    • 0