Question

I have the following JavaScript function

function headerBanner(){
    var current = $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'none');
    if(bannerIndex== $('.bannerImages img').size()){
        bannerIndex= 1;
    }else{
        bannerIndex= (bannerIndex*1)+1;
    }
    var next =  $('.bannerImages img:nth-child('+bannerIndex+')').css('display', 'block');
}

In every browser on the planet, with the exception of IE (8, 7 or less), the above code is working correctly. In Internet Explorer it’s going through it and having no effect. I’ve put alerts at every line of the function and they all fire, even in IE, but the banner simply doesn’t change. Is there any reason as to why this is so?

The HTML attached for this function is the following:

<div class='bannerImages'>
    <img src="FirstImage.jpg" />
    <img src="SecondImage.jpg" />
    <img src="ThirdImage.jpg" />
</div>

Answer 1

try this:

DEMO: http://jsbin.com/ipudo/4

$(function(){
    $('.bannerImages img:gt(0)').hide();
    setInterval(function(){
      $('.bannerImages :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.bannerImages');}, 
      3000);
});​