jquery在最后一张图片上停止

jquery stop on last image fadein

本文关键字：一张 最后 jquery      更新时间：2023-09-26

我正在执行三个图像的fadeIn和FadeOut。但当它到达最后一个时，它会返回到第一个。我想停留在最后一张照片上。我该怎么做？

$(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
{
	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>

$(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)
}

它不漂亮，可能效率也不高，但似乎有效。

相关文章：