人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

以下のようなジャバスクリプトのスライドショーですが、現在は5枚がループしているのですが、5枚目で停止させたい場合は、どのよう改変したらよいのでしょうか?

<style>
.fadein { position:relative; height:200px; width:725px; }
.fadein img { position:absolute; left:0; top:0; }
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.fadein');}, 5000);
});
</script>





<div class="content"><div class="fadein" style="margin-top:10px;margin-left:20px;margin-bottom:30px;">
<img src="images/topimgnoa.jpg" width="725" height="193" />
<img src="images/topimgnoa1.jpg" width="725" height="193" />
<img src="images/topimgnoa2.jpg" width="725" height="193" />
<img src="images/topimgnoa3.jpg" width="725" height="193" />
<img src="images/topimgnoa4.jpg" width="725" height="193" />
</div>

●質問者: hashimajc
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

http://jsfiddle.net/cherenkov/28Eas/1/

$(function(){
 var imgFade = function() {
 setTimeout(function(){
 $('.fadein img:visible').fadeOut(5000).next('img').fadeIn(5000, function() {
 if(!$('.fadein img:visible').is('.fadein img:last')) {
 imgFade();
 }
 });
 }, 1000);
 };
 $('.fadein img:gt(0)').hide(); //このタイミングで隠すのは遅いと思う
 imgFade();
});
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ