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