Добрый вечер. Сразу скажу, что я только начинаю свой путь в 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] будет первой картинкой, то первому квадратику дать фон серым.
}
У меня ничего не вышло. Может вы что-то посоветуете? Или подскажите что я делаю не правильно.
