Fade между изображениями

Question

Я некоторый код установить исчезать между изображениями, и это не работает должным образом:

Изображения:

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

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> 

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} 

Но все, что я получаю представляет собой кучу изображений, например: http://f14.co/automaker-search/reno/

Я предполагаю, что я ушел? Я действительно стараюсь, чтобы это было просто. Нет зависания, просто авто вращаются.

Answer 1

Я хотел бы сделать это следующим образом:

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

Answer 2

Вы, кажется, имеют синтаксическую ошибку в коде, который находится на странице, если заменить функцию cycleImages с той, которую вы над ним следует начать работать.

Как в стороне, я бы написал интервал как просто setInterval(cycleImages, 7000) и спрятал любые изображения, которые в настоящее время не отображаются (они, кажется, «выкалывают» в фоновом режиме).