jquery停在最后一张图片fadein上

时间:2016-06-28 17:37:06

标签: javascript html css

我在三个图像的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>

1 个答案:

答案 0 :(得分:0)

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

}

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