Javascript jQuery在库中的列表项之间旋转

这可能已经得到了回答，我已经知道这应该如何工作，但出于某种原因，它不是。我想这可能是我在元素中循环的方式

$(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>

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

---

主要的问题是，正如注释所述，延迟并不像您认为的那样——您应该查看本机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对象的单个实例，其中包含一开始缓存的所有幻灯片。在当前幻灯片淡出后，我们还使用淡出函数提供的回调函数在下一张幻灯片中淡出

---

请参阅以获取简单演示

我会这样做：

<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>

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

---

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

根据这一点，延迟函数没有回调函数，因此我认为changeSlide永远不会执行。出于某种原因，changeSlide第一次被调用，但当它到达函数$element+'li:eq'+idx+.fadeOut；没有人打电话。我可能不得不求助于setTimeout，并处理它！是的，注意这个双重；；在changeSlide的最后一行，这将停止您的脚本。完全错过了这一点！也没有意识到这是事实。我只是假设这样的事情会被跳过，因为这只是一条空行。我想错了！答对 了这是一种享受，是的，这是更有效的方式。你是一个传奇。谢谢这个插件的想法很好。我会在以后重写代码时立即实现它。我倾向于将将来可能要在插件中重用的任何jQuery代码包装起来。它只是让它很容易扩展和用于其他东西。我有大量的插件，这些插件是我随着时间积累起来的。哦，顺便说一句，JavaScript的setInterval将每隔x毫秒重复一次操作，这就消除了函数递归调用自身的需要。