Помогите доделать слайдер
Добрый вечер. Сразу скажу, что я только начинаю свой путь в JS и много чего еще не знаю, либо делаю вовсе некорректно.
У меня задача - сделать простой слайдер из 4х картинок. Сам слайдер работает, переключает картинки нормально. Все как я и запланировал. Только есть один небольшой нюанс, когда выбрана первая картинка, нужно чтобы первый квадратик на слайде менял цвет, когда выбрана вторая картинка слайда, нужно чтобы второй квадратик менял цвет и так далее. Так выглядит слайд ![]() Вот ХТМЛ код слайда: <div id="telo"> <div id="levo"></div> <div id="pravo"></div> <div id="knopki"> // собственно, это и есть мои "квадратики" <span id="01"> </span> <span id="02"> </span> <span id="03"> </span> <span id="04"> </span> </div> <img id="img" src="" alt=""> </div> Вот JS
var images = ["01.jpg","02.jpg","03.jpg","04.jpg"];
var curentImage = 0;
$("#img").attr('src',images[curentImage]);
$('#levo').click(function(){
if(curentImage != 0){
curentImage--;
setTimeout(function(){$("#img").attr('src',images[curentImage])},300);
}
});
$('#pravo').click(function(){
if(curentImage < images.length){
curentImage++;
setTimeout(function(){$("#img").attr('src',images[curentImage])},300);
}
});
Вот как я планировал решить данную задачу (решений было много, но это одно из последних): хотел в функцию выборки $('#pravo') написать следующее
if(images[curentImage] == "01.jpg"){
$('#01').addClass('active'); // #01 - это id первого квадратика. Новый класс ему добавить серый фон. То есть, если images[curentImage] будет первой картинкой, то первому квадратику дать фон серым.
}
У меня ничего не вышло. Может вы что-то посоветуете? Или подскажите что я делаю не правильно. |
setTimeout(function(){$("#img").attr('src',images[curentImage]);$('#telo span').removeClass('active').eq(curentImage).addClass('active')},300);
:) |
рони,
Отлично, спасибо большое. Три часа думал как решить поставленную задачу, а кому-то и минуты хватило :) Насколько я понимаю, .eq() отвечает именно за тот span, который должен подсвечиваться? А в кавычках номер текущей фотки с массива (соответственно, и номер спана). |
malevi4,
чтоб не искать убираем 'active' у всех span устанавливаем 'active' у нужного |
| Часовой пояс GMT +3, время: 11:37. |