CODEWITHSUNDEEP
javascriptjqueryhtml
Taha Rehman Siddiqui
Taha Rehman Siddiqui

Reputation: 2533

HTML Javascript Slideshow Optimization

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.

Upvotes: 1

Views: 235

Answers (1)

JamesOR
JamesOR

Reputation: 1168

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();​

Upvotes: 2

Related Questions