jquery stop auf dem letzten Bild Fadein

Question

Ich bin Doin FadeIn und FadeOut von drei Bildern.aber wenn es ankommt das letzte, es kehrt zum ersten zurück. Ich möchte auf dem letzten Bild zu stoppen.wie kann ich das tun?

$(document).ready(function(){ 
 
// run every 7s 
 
setInterval('raiseToSunrise()', 1000); 
 
}); 
 
function raiseToSunrise(){ 
 
     var $active = $('#layout .active'); 
 
     //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first'); 
 
    var $next = $active.next(); 
 
    console.log($active.next().length); 
 

 
     $next.css('z-index',1);//move the next image up the pile 
 
     $active.fadeOut(8000,function(){//fade out the top image 
 
     $active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image 
 
     $next.css('z-index',2).addClass('active');//make the next image the top one 
 
     }); 
 
     
 
    }

#layout { 
 
    position:relative; 
 
    width:100%; 
 
    margin:0 auto; 
 
} 
 

 
#layout img { 
 
    position:absolute; 
 
    width:100%; 
 
    z-index:0; 
 
    
 
} 
 
#layout img.active 
 
{ 
 
\t z-index:2; 
 
}

<div id="layout"> 
 
      <img class="active" id="nightimg" src="TemplateData/images/img_background_night.jpg" alt="myImage"/> 
 
      <img id="sunriseimg" src="TemplateData/images/img_background_sunrise.jpg" alt="myImage" /> 
 
      <img id="dayimg" src="TemplateData/images/img_background_day.jpg" alt="myImage"/> 
 
     </div>

Answer 1

$(document).ready(function(){ 
    // run every 7s 
    raiseToSunrise(8000) 
}); 
function raiseToSunrise(interval){ 
    var num = 1; 
    var theinterval = setInterval(function() { 

    var $active = $('#layout .active'); 
    //var $next = ($active.next().length > 0) ? $active.next() : $('#layout img:first'); 
    var $next = $active.next(); 
    console.log($active.next().length); 

    $next.css('z-index',1);//move the next image up the pile 

    $active.fadeOut(8000,function(){//fade out the top image 
     $active.css('z-index',0).show().removeClass('active');//reset the z-index and unhide the image 
     $next.css('z-index',2).addClass('active');//make the next image the top one 
    }); 
    num = num+1; 
    if(num == 4){ 
     clearInterval(theinterval); 
    } 
    }, interval) 

} 

Es ist nicht schön und wahrscheinlich nicht effizient, aber es scheint zu funktionieren.