Question

I have a simple image slider that rotates through a ul and displays each li one after the other. Recently, it has started displaying two images instead of one. It displays images in a pattern of (there are 5 “li”s): none&1, 1&2, 2&3, 3&4, 4&5, and then 1&5, then 1&2, 2&3, and so on. I have an example in the footer of my site here: http://kunkelwe.kodingen.com/Site/?page_id=25/

My code is this:

function fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration) {
  if(!currentListItem) {
    startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
            fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);
        }); //#webmaster fade in, fade out, then recurse with start
    return;
  }
  else {
    currentListItem = currentListItem.next("li");
    if ((currentListItem.get(0)) === (currentListItem.parent().last("li").get(0))) {
      startListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
          fadingSlider(startListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);
    });
    return;
    }
    else {
        currentListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
        fadingSlider(currentListItem, startListItem, fadeInDuration, displayDuration, fadeOutDuration);
        });
        return;
    }
  }
}

jQuery(window).load(function() {
  fadingSlider(null, jQuery("ul.sponsorSlider > li:first-child"), 300, 5000, 300);
});

EDIT: I have tried rewriting the script, to make it simpler and possibly eliminate the error, but unfortunately the error is still occurring. Here’s the new version:

function fadingSlider(currentListItem, list, fadeInDuration, displayDuration, fadeOutDuration) {
    if(currentListItem){
        currentListItem = currentListItem.next("li");
    }
    if(!currentListItem || currentListItem.length === 0) {
    currentListItem=list.children("li:first-child");
    }
    currentListItem.fadeIn(fadeInDuration).delay(displayDuration).fadeOut(fadeOutDuration, function() {
        fadingSlider(currentListItem, list, fadeInDuration, displayDuration, fadeOutDuration);
    });
    return;
}

jQuery(window).load(function() {
  fadingSlider(null, jQuery("ul.sponsorSlider"), 300, 5000, 300);
});

and the html is this:

<section class="sponsors">
<h1>Sponsors</h1>
   <ul class="sponsorSlider">
      <li><a href=""><img src="/Standard/Images/SponsorLogos/aftonChemicalLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/dupontLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/flexicellLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/cFSauerLogo.jpg" alt="" /></a></li>
      <li><a href=""><img src="/Standard/Images/SponsorLogos/mWVLogo.jpg" alt="" /></a></li>
   </ul>
</section>

EDIT: I have traced the problem, oddly enough, to the use of jQuery(window).load(). For some reason, this event was firing twice. I changed it to window.onload and the thing worked like a charm. I assume this is a bug with jQuery, but it just seems odd.

Answer 1

The problem is with jQuery(window).load(). For some reason, this event is firing twice. Using window.onload instead fixes the problem.