Есть список 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.