javascript - 複数の画像を切り替える

Question

私は私のjsでこれを持っています：

$(function(){
    $('.slide:nth-child(11) .layout-100:first-child').click(function(){
        $('.slide:nth-child(11) .layout-100:first-child').fadeOut('slow');
        $('.slide:nth-child(11) .layout-100:nth-child(2)').fadeIn('slow');
    });
});

$(function(){
    $('.slide:nth-child(11) .layout-100:nth-child(2)').click(function(){
        $('.slide:nth-child(11) .layout-100:nth-child(2)').fadeOut('slow');
        $('.slide:nth-child(11) .layout-100:nth-child(3)').fadeIn('slow');
    });
});

...等々。

クリック機能で切り替えたい画像が複数あります。しかし、私が今それを書き留めている方法は、多くのコードです。これを1つの関数に入れる方法はありますか?

Answer 1

可視画像のインデックスを取得し、それをパラメーターとして関数に渡すことができます。どの画像がフェードインおよびフェードアウトするかを簡単に計算できます。

うまくいくものでフィドルを作ることができますか？フィドルを編集して、それがどのように機能するかをお見せします。

Answer 2

これを試してみることはできますが、html 構造を確認しないとテストできません。

jQuery(function($){
  $('.slide:nth-child(11) .layout-100').each(function() {
    $(this).click(function() {
      $(this).fadeOut('slow');
      if ($(this).next().length)
        $(this).next().fadeIn('slow');
      else
        $(this).parent().children().first().fadeIn('slow');
    });
  });
});