Смена класса у элемента через интервал времени
 

Здравствуйте обитатели 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();
    });

});