jQuery вращается через элементы списка в галерее - PullRequest
Новая
       17

jQuery вращается через элементы списка в галерее

0 голосов
/ 14 февраля 2011

Вероятно, на это уже отвечали раньше, и я уже знаю, как это должно работать, но по какой-то причине это не так. Я думаю, что это может быть, как я перебираю элементы. 

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

Ответы [ 2 ]

5 голосов
/ 14 февраля 2011

Основная проблема в том, что, как говорится в комментарии, 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/ для простой демонстрации

2 голосов
/ 14 февраля 2011

Я бы сделал это примерно так: 

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

edit: Отредактировал плагинкод, чтобы привести его в соответствие с хорошей практикой.

...