CODEWITHSUNDEEP
javascripthtmlcssimagerotation
Ken
Ken

Reputation: 57

Fade Between Images

I have some code set up to fade between images, and it's not working properly:

The images: 

 <div id="banner_area">
<img class="active" src= "http://f14.co/automaker-search/assets/images/laptop-Dodge.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Ford.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Honda.png">
<img src= "http://f14.co/automaker-search/assets/images/laptop-Subaru.png">
</div>

The javascript:

<script>
function cycleImages(){
  var $active = $('#banner_area .active');
  var $next = ($('#banner_area .active').next().length > 0) ? $('#banner_area .active').next() : $('#banner_area img:first');
  $next.css('z-index',2);//move the next image up the pile
  $active.fadeOut(1500,function(){
//fade out the top image
  $active.css('z-index',1).show().removeClass('active');

//reset the z-index and unhide the image
   $next.css('z-index',3).addClass('active');//make the next image the top one
  });
}

$(window).load(function(){
    $('#banner_area').fadeIn(1500);//fade the background back in once all the     images are loaded
      // run every 7s
      setInterval('cycleImages()', 7000);
})</script>

The CSS:

#banner_area img { width:714px; height:414px; position:absolute; top:28px; left:55px;top:0;z-index:1}
#banner_area img.active{z-index:3}

Yet all I get is a pile of images, like so: http://f14.co/automaker-search/reno/

I'm guessing I'm way off? I'm really trying to keep it simple. No hover, just an auto rotate.

Upvotes: 0

Views: 2779

Answers (3)

BTEVC
BTEVC

Reputation: 179

We had some fun accomplishing this with a NodeList: 

var nodes = document.querySelectorAll('#banner_area img');
var count = nodes.length;

setInterval(function() {
    count -= 1;
    if (count > 0) {
        $(nodes[count]).fadeOut(1500);
    }
    else {
        count = nodes.length;
        $(nodes[count - 1]).fadeIn(1500, function() {
            $(nodes).fadeIn(100); // arbitrary speed to outpace next transition
        });
    }
}, 7000);

:)

Upvotes: 0

SimonR
SimonR

Reputation: 1268

You appear to have a syntax error in the code that is on the page, if you replace the cycleImages function with the one you have above it should start to work.

As an aside, I would write the interval as simply setInterval( cycleImages, 7000 ), and hide any images that are not currently being shown (they seem to "poke out" in the background).

Upvotes: 0

adeneo
adeneo

Reputation: 318182

I would do it like this:

function cycleImages(){
    var images = $('#banner_area img'),
        now    = images.filter(':visible'),
        next   = now.next().length ? now.next() : images.first(),
        speed  = 1500;

    now.fadeOut(speed);
    next.fadeIn(speed);
}

$(function() {
    setInterval(cycleImages, 7000);
});

FIDDLE

Upvotes: 2

Related Questions