指定時間経過後に画像を一定時間で切替

質問

Javascriptで指定時間経過後に画像を一定時間で切替したいと思っています。
一定時間の画像切替は以下のように実現しています。このJavascriptにさらに”指定時間経過後”という条件を付けたいのですがどうしたらよいでしょうか？

■Javascript
<script>
$(document).ready(function(){
$('.slideImg img:gt(0)').hide();
setInterval(function() {
$('.slideImg :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.slideImg ');
},5000);
});
</script>

■HTML
<div class="slideImg ">
<img src="img1.jpg" alt="" />
<img src="img2.jpg" alt="" />
<img src="img3.jpg" alt="" />
</div>

■CSS
.slideImg{
position:relative;
width: 100px;
height: 100px;
}
.slideImg img{
position:absolute;
left:0;
top:0;
}

回答No.1

Ogre7077 · ベストアンサー

$(document).ready(function(){
var 一定時間 = 5000, 指定時間 = 8000;
$('.slideImg img:gt(0)').hide();
var f = function(){$('.slideImg :first-child').fadeOut(1000).next('img').fadeIn(1000).end().appendTo('.slideImg')};
setTimeout(function(){f(); setInterval(f, 一定時間)}, 指定時間);
});

お礼

ありがとうございました。出来ました！