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