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>

我试图让它在延迟后逐个循环元素，以便列表项调用函数并隐藏自身，然后计数器递增，然后显示当前索引。 我怀疑罪魁祸首是这样的，就好像我在调用它的函数中放置了一个警报：

 $(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 函数提供的回调函数在当前幻灯片淡出后淡入下一张幻灯片。

请参阅 http://www.jsfiddle.net/b3Lf5/1/ 进行简单演示

Answer 2

我会这样做：

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

或者更好的是，将其包装在插件中：

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

编辑：编辑插件代码以使其符合良好实践。