Показать сообщение отдельно
  #1 (permalink)  
Старый 05.08.2015, 22:12
Новичок на форуме
Отправить личное сообщение для Evreke Посмотреть профиль Найти все сообщения от Evreke
 
Регистрация: 16.03.2015
Сообщений: 1

Смена класса у элемента через интервал времени
Здравствуйте обитатели javascript.ru. Замечательный учебник написан, потрясающий форум. Теперь и я присоединился к миру программирования на JS.

Делаю карусель на jQuery.

Здесь повещен обработчик событий onclick на html элементы <a>, которые переключают изображения в моей карусели. Я бы хотел добавить автоматизма в этот скрипт и второй фичей сделать автоматическую смену слайдов раз в 4 секунды.
Как лучше реализовать эту задачу?


Не прошу готового решения, но прошу помочь понять.

$(document).ready(function(){

    var allCarouselImages = $(".slider ul li");

    $(".nextLink").click(function(e) {

        var currentActiveImage = $(".img-shown");
        var nextActiveImage = currentActiveImage.next();

        if(nextActiveImage.length == 0)
        {
            nextActiveImage = $(allCarouselImages).first() ;
        }

        currentActiveImage.removeClass("img-shown").addClass("img-hidden").css("z-index", -10);
        nextActiveImage.addClass("img-shown").removeClass("img-hidden").css("z-index", 5);
        allCarouselImages.not([currentActiveImage, nextActiveImage]).css("z-index", 1);

        e.preventDefault();
    });

    $(".previousLink").click(function(e) {

        var currentActiveImage = $(".img-shown");
        var nextActiveImage = currentActiveImage.prev();

        if(nextActiveImage.length == 0)
        {
            nextActiveImage = $(allCarouselImages).last();
        }

        currentActiveImage.removeClass("img-shown").addClass("img-hidden").css("z-index", -10);
        nextActiveImage.addClass("img-shown").removeClass("img-hidden").css("z-index", 5);
        $(allCarouselImages).not([currentActiveImage, nextActiveImage]).css("z-index", 1);

        e.preventDefault();
    });

});
Ответить с цитированием