Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   У слайд-карусели нужно сделать меню с отображением номера картинки (https://javascript.ru/forum/dom-window/31281-u-slajjd-karuseli-nuzhno-sdelat-menyu-s-otobrazheniem-nomera-kartinki.html)

Юрий7777 01.09.2012 09:55

У слайд-карусели нужно сделать меню с отображением номера картинки
 
Есть список ul li с картинками у которого при нажатии на правую/левую стрелку изменяется margin left (+/- 600px за каждую картинку).

Далее я вычисляю сколько всего картинок и создаю столько же дивов с номером картинки:

for(i=0; i<imgs.length; i++){
newDiv = document.createElement('div');
newDiv.className="class1";
newDiv.innerHTML = i+1 ;
ParentElem.appendChild(newDiv);

теперь при клике на нужный див, margin left должен меняться
i - номер дива
width - ширина картинки
position - текущая позиция
newPosition - нужная позиция
передвижение анимируется с помощью функции описанной в учебнике

newDiv.onclick = function(i) {
return function() {
if(width*i > position) newPosition = width*(-i);
if(width*i < position) newPosition = i*width + position;
animateProp({
elem: ul,
prop: "marginLeft",
start: position,
end: newPosition,
duration: 250,
delay: 20
});
position = newPosition;
return false;
}
}(i);
}

!!! Как сделать так, чтобы у созданных дивов изменялся стиль при переходе к картинке, соответствующей номеру дива?

Например, при показе первой картинки 1-ый див имеет стиль class2, при переходе ко 2-ой картинке 2 див изменяет свой стиль c class1 на class2, а первый изменяет стиль с class2 на class1.

lord2kim 01.09.2012 10:19

Юрий7777, лучше если бы был действующий пример...
а так...если вы знаете № div-a (k), которому нужно присвоить class1 или class2, то
document.getElementsByTagName("div")[k].className = "class1"; // или class2
document.getElementsByTagName("div")[k+1 или k-1].className = "class1"; // или class2

или циклом пробежаться по всем div-ам установив им class1, а нужному установить class2


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