Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите доделать слайдер (https://javascript.ru/forum/misc/55976-pomogite-dodelat-slajjder.html)

malevi4 23.05.2015 22:38

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


У меня ничего не вышло. Может вы что-то посоветуете? Или подскажите что я делаю не правильно.

рони 23.05.2015 22:44

setTimeout(function(){$("#img").attr('src',images[curentImage]);$('#telo span').removeClass('active').eq(curentImage).addClass('active')},300);
:)

malevi4 23.05.2015 23:11

рони,
Отлично, спасибо большое. Три часа думал как решить поставленную задачу, а кому-то и минуты хватило :)

Насколько я понимаю, .eq() отвечает именно за тот span, который должен подсвечиваться? А в кавычках номер текущей фотки с массива (соответственно, и номер спана).

рони 23.05.2015 23:18

malevi4,
чтоб не искать убираем 'active' у всех span устанавливаем 'active' у нужного


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