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>

I was trying to get it to loop through the elements one by one, after a delay so the list item calls the function and hides itself, then the counter is incremented and then the current index is shown. I suspect the culprit to be this as if I put an alert in the function it is called:

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

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

友情链接