jQueryはギャラリー内のリスト項目を回転します

Question

これはおそらくこれまでに回答されていますが、これはどのように機能すべきかはすでに分かっていますが、何らかの理由でそうではありません。私はそれがどのように要素をループしているのかもしれないと思う。

$(document).ready(function() { 
    var element = '#gallery ul#gallery-container'; 
var idx=0; 
var timeout = 3000; 
var number = $(element + ' li').length; 

function changeSlide() { 

    $(element + ' li:eq(' + idx + ')').fadeOut(); 

    idx = idx + 1; 

    if (idx == number) { 
     idx=0; 
    } 

    $(element + ' li:eq(' + idx + ')').fadeIn().delay(timeout).delay(0, function() { 
     changeSlide(); 
    });; 

} 

$(element + ' li').hide(); 

$(element + ' li:first').fadeIn().delay(timeout).delay(0, function() { 
    changeSlide(); 
}); 
}); 

次に、リストには、このようなものです：

<div id="gallery"> 
    <ul id="gallery-container"> 
     <li><img src="media/images/screen-shot-02.jpg" width="173" height="258" alt=" "></li> 
     <li><img src="media/images/screen-shot-01.jpg" width="173" height="258" alt=" "></li> 
    </ul> 
</div> 

リスト項目が関数を呼び出し、それ自身を隠すように、私が遅れた後、一つの要素の1をループにそれを取得しようとしていました、カウンタがインクリメントされ、現在のインデックスが表示されます。 私はそれが呼び出される関数に警告を置くかのように、私は犯人はこのことを疑う：

$(element + ' li:eq(' + idx + ')').fadeOut(); 

Answer 1

主な問題はdelayあなたはそれがないと思う何をしません、コメント状態として、です - あなたがすべき代わりにネイティブのsetTimeout関数を調べてください。それに加えて、これをより効率的にすることができる複数の場所があります。これを見ている：

var element = $('#gallery-container li'), 
    length = element.length, 
    current = 0, 
    timeout = 3000; 

function changeSlide() { 
    element.eq(current++).fadeOut(300, function(){ 
     if(current === length){ 
      current = 0; 
     } 

     element.eq(current).fadeIn(300); 
    }); 

    setTimeout(changeSlide, timeout); 
} 

element.slice(1).hide(); 
setTimeout(changeSlide, timeout); 

私たちは、動的に生成されたセレクタとjQueryの機能を呼び起こすが、代わりに開始時にキャッシュされたすべてのスライドを含むjQueryオブジェクトの単一のインスタンスを操作しないようにしてください。 fade関数が提供するコールバック関数を使用して、現在のものがフェードアウトした後に次のスライドをフェードインさせます。プラグインでそれをラップし、まだ良い

$(document).ready(function() { 
    var element = '#gallery ul#gallery-container'; 
    var idx = 0; 
    var timeout = 3000; 
    var number = $(element + ' li').length; 

    setInterval(function() { 
     idx = (idx + 1) % number; 
     $(element + ' li:visible').fadeOut(); 
     $(element + ' li:eq(' + idx + ')').fadeIn(); 
    },timeout); 
    $(element + ' li:not(:first)').hide(); 
}); 

または：：

は

Answer 2

私はこのようにそれに何かをするだろう簡単なデモのためhttp://www.jsfiddle.net/b3Lf5/1/を参照してください

(function ($) { 
    $.fn.customGallery = function (options) { 
     defaults = { 
      timeout : 3000 
     }; 
     options = $.extend(defaults, options); 
     return this.each(function() { 
      var idx = 0, number = $(this).children('li').size(), element = this; 
      setInterval(function() { 
       idx = (idx + 1) % number; 
       $(element).children('li:visible').fadeOut(); 
       $(element).children('li:eq(' + idx + ')').fadeIn(); 
      },options.timeout); 
      $(element).children('li:not(:first)').hide(); 
     }); 
    }; 
}(jQuery)); 

jQuery(document).ready(function($) { 
    $('#gallery-container').customGallery() 
}); 

編集：プラグインのコードを編集して、それを良い習慣で整列させます。