0

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.

4
  • 1
    You don't have an element with the ID #banner_area, it's a class ?
    – adeneo
    Commented Aug 8, 2013 at 23:28
  • Sorry that's set to ID...not class...typo. Edited.
    – Ken
    Commented Aug 8, 2013 at 23:31
  • try using .ready instead of .load, also your exemple source just get var = $('#banner_area .active'); missing the var name
    – r043v
    Commented Aug 8, 2013 at 23:32
  • you can also do setInterval(cycleImages, 7000); and replace $('#banner_area .active').next() by $active.next()
    – r043v
    Commented Aug 8, 2013 at 23:34

3 Answers 3

2

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

0
0

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).

3
  • maybe he write his js from php in " instead of ', and php just trim the empty $vars :)
    – r043v
    Commented Aug 8, 2013 at 23:37
  • the adeneo code will hide them directly as it select :visible pictures
    – r043v
    Commented Aug 9, 2013 at 5:54
  • but if you not want wait the first interval before hide do a thing like $('#banner_area img:nth-child(n+2)').hide(); at launch
    – r043v
    Commented Aug 9, 2013 at 6:01
0

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

:)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.