jQuery повторяет цикл массива для изменения атрибутов тега - PullRequest
Новая
       14

jQuery повторяет цикл массива для изменения атрибутов тега

0 голосов
/ 20 февраля 2012

Я делаю простой слайдер, который работает путем изменения атрибута src тега img и атрибутов тегов привязки. Это то, что я придумал до сих пор: 

(function($){
    var slides = [
        'http://placehold.it/801x350',
        'http://placehold.it/802x350',
        'http://placehold.it/803x350'
    ],
    titles = [
        'Title 1',
        'Title 2',
        'Title 3'
    ],
    links =  [
        'http://test1.com',
        'http://test2.com',
        'http://test3.com'
    ],
    image = $('#stretch-img'),
    anchor = $('.featured-title>h2>a');

    var interval = setInterval(function() {
        image.attr('src', slides[0]);
        anchor.attr('href', links[0]);
        anchor.html(titles[0]);
    }, 3000);
})(jQuery);

Я хочу, чтобы интервал непрерывно перебирал массивы с простым эффектом затухания Что может быть лучшим способом сделать это или каким-либо другим способом, потому что у меня его нет.

Спасибо!

Я ценю всю помощь.

1 Ответ

2 голосов
/ 20 февраля 2012

Для циклического перемещения по вашему массиву вы можете установить переменную current-position и переменную, которая сохраняет длину массива: 

var current = 0,
    length  = slides.length,
    interval = setInterval(function() {
        image.attr('src', slides[current]);
        anchor.attr('href', links[current]).html(titles[current]);

        current++;
        if (current >= length) {
            current = 0;
        }
    }, 3000);

Затем, чтобы исчезнуть, вы можете исчезнуть, измените источник,затем fade-back-in: 

        image.fadeOut(500, function () {
            image.attr('src', slides[current]).fadeIn(500);
            anchor.attr('href', links[current]).html(titles[current]);

            current++;
            if (current >= length) {
                current = 0;
            }
        });

Это может привести к тому, что изображение загружается не совсем при включении fadeIn(500), что можно исправить с помощью обработчика событий, прикрепленного к loadсобытие для элемента image: 

var image = $('#stretch-img').on('load', function () {
    image.fadeIn(500);
});

Затем вы можете удалить fadeIn(500) из функции интервала, поскольку она будет срабатывать при загрузке изображения.Событие load будет срабатывать при каждом изменении источника изображения и завершении загрузки нового источника.

Обратите внимание, что .on() является новым в jQuery 1.7 и в этом случае совпадает с .bind().

...