Как через setInterval последний элемент списка переставлять в начало?

Question

[Maks]

Есть следующая структура:

<ul id="drumLeft">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
<ul>

Через интервалы я сделал, чтобы она через каждые 100 мс смещалась вниз на 20 px.
Теперь мне нужно, чтобы раз в секунду последний элемент списка переставлялся из конца на начало.
Я сделал так:

function swapElem() {
	var i = drumLeft.getElementsByTagName('LI');
	i[i.length-1].style.marginTop = -1000+"px";
}
setInterval(swapElem,1000);

p.s. drumLeft - айдишник ul.
От такой реализации перетаскивание происходит только один раз (через первую секунду). Я так понял, что это потому, что js заранее определяет переменные и больше их через setInterval не переопределяет.
Тогда сделал так:

function swapElem() {
	drumLeft.getElementsByTagName('LI')[drumLeft.getElementsByTagName('LI').length-1].style.marginTop = -1000+"px";
}
setInterval(swapElem,1000);

Вроде без переменных, но ситуация аналогична. Как быть?

UPD. Новая рабочая система:

var aa = drumLeftLi.length-1;
function swapDrum() {
	// Первому элементу делаем zIndex повыше
	if (aa+1 == 10) {
		drumLeftLi[0].style.zIndex = 40;
	} else {
		drumLeftLi[aa+1].style.zIndex = 40;
	}
	// Последнему элементу делаем zIndex ниже, чтобы при прокрутке он не перекрывал другие элементы
	drumLeftLi[aa].style.zIndex = 38;
	// Переставляем последний элемент на начало
	drumLeftLi[aa].style.marginTop = parseInt(drumLeftLi[aa].style.marginTop,10) -1000+"px";
	if (aa >= 1) {
		aa--;
	} else {
		aa = drumLeftLi.length-1;
	}
}
setInterval(swapDrum,200);

Answer 1

[kschingiz]

Всё верно, Вы каждый раз берете один и тот же элемент и ставите ему margin -1000px:
i[i.length-1] -> 4 и так будет всегда, потому что надо смотреть не на порядок вывода в браузере, а на порядок в DOM.
Получается при каждом вызове Вам нужно менять индекс получаемого объекта:
i[3] -> 4 (Последний элемент)
i[2] -> 3 (Четверка поднялась наверх, значит по порядку вывода, тройка последняя)
и тд...

Comments

[kschingiz]

У вас реализация САДО-МАЗО С JS называется =)

[Maks]

Вы меня натолкнули на мысль. Попробую и отпишусь =)

[Maks]

Да, все получилось. Спасибо!

[Евгений Петров]

надо смотреть не на порядок вывода в браузере, а на порядок в DOM

Порядок вывода в браузере — это что?
Браузер парсит и строит DOM. Переставили элемент — DOM изменился.
А эти манипуляции с margin... Ужос.

[kschingiz]

Евгений Петров:
1 -> li
2 -> li с margin = -100px
Здесь 2-й выведется выше 1-го, это я и имел ввиду "Порядок вывода в браузере". Извиняюсь если что-то непонятно вышло.
-> А эти манипуляции с margin... Ужос.
Первый коммент моего ответа

[Maks]

Евгений Петров: kschingiz: я доделал свой вариант, он получился рабочим, но ваши комментарии про марджин заставили подумать о другой реализации и ... я ее не смог придумать.
У меня стандартная рулетка из десяти элементов списка. Каждые 200 мс все эти элементы смещаются на 100px вниз, а последний ставится на первое место. И так она крутится до бесконечности (добавил в UPD свою реализацию).
Натолкните, пожалуйста, на путь другой реализации.