以下のようなジャバスクリプトのスライドショーですが、現在は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>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/07/20 11:13:53
  • 終了:2012/07/27 11:15:06

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/07/20 12:37:27

ポイント100pt

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません