Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Смена класса у элемента через интервал времени (https://javascript.ru/forum/events/57490-smena-klassa-u-ehlementa-cherez-interval-vremeni.html)

Evreke 05.08.2015 23:12

Смена класса у элемента через интервал времени
 
Здравствуйте обитатели 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();
    });

});

Vlasenko Fedor 06.08.2015 01:25

http://javascript.ru/forum/371077-post13.html


Часовой пояс GMT +3, время: 22:09.