我在三个图像的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>
答案 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)
}
它不漂亮,可能效率不高,但似乎有效。