IMHO.WS - Слайдер-карусель с z-index на JS

IMHO.WS (http://www.imho.ws/index.php)

- Веб-программирование (http://www.imho.ws/forumdisplay.php?f=29)

- - Слайдер-карусель с z-index на JS (http://www.imho.ws/showthread.php?t=143910)

Слайдер-карусель с z-index на JS

Доброго времени суток.
Задался целью сделать простую слайдер-карусель из трёх изображений.
Изучив ряд мануалов сделал вот что:

Код HTML:

<html>

<head>

<script>

function left()

{

cover3.style.zIndex=2;

cover2.style.zIndex=1;

cover1.style.zIndex=1;

cover3.style.top='150px';

cover2.style.top='100px';

cover3.style.left='210px';

cover2.style.left='120px';

cover1.style.left='350px';

cover3.style.width='168px';

cover3.style.height='168px';

cover2.style.width='120px';

cover2.style.height='120px';

}



function right()

{

cover1.style.zIndex=2;

cover2.style.zIndex=1;

cover3.style.zIndex=1;

cover1.style.top='150px';

cover2.style.top='100px';

cover1.style.left='210px';

cover2.style.left='350px';

cover3.style.left='120px';

cover1.style.width='168px';

cover1.style.height='168px';

cover2.style.width='120px';

cover2.style.height='120px';

}

</script>

</head>

<body>

<table><tr>

<td><a href=# onclick="left()" >назад</a></td>

<td>

<img id="cover1" alt="cover1" src="cover1.jpg" style="position: absolute; top: 100px; left: 120px; z-index: 1; width: 120px; height: 120px;" />

<img id="cover2" alt="cover2" src="cover2.jpg" style="position: absolute; top: 150px; left: 210px; z-index: 2;" />

<img id="cover3" alt="cover3" src="cover3.jpg" style="position: absolute; top: 100px; left: 350px; z-index: 1; width: 120px; height: 120px;" />

</td>

<td><a href=# onclick="right()" >вперёд</a></td>

</tr></table>



</body>

</html>

h**p://mstar31.ru/1.html - пример
Видно, что не хватает автоматизации, и что называется "полного поворота карусели". Т.е. из начальной загрузки страницы можно повернуть на треть оборота в одну или в другую сторону.

Подскажите, пожалуйста, (лучше на примерах) как это можно реализовать на JS (но без готовых библиотек типа jQuery).

Делать не пробовал, но как предложение...

Карусель можно реализовать при помощи HTML тега бегущей строки
MARQUEE. В неё можно вставлять картинки. Если получится изменить значение атрибута DIRECTION при помощи JS или аякс, то можно изменить направление движение карусели.

Так а в чем именно проблема, что не получается?
И почему без фрэймворков? На jQuery это было бы много легче.

Цитата:

Сообщение от Hubbitus (Сообщение 1713744)

На jQuery это было бы много легче.

Конечно jQuery сила. Но иногда она слишком громоздка и не без излишеств.
И есть такой факт, некоторым людям важен сам процесс самостоятельного создания кокой то дребедени на JS и Ajax – для образовательных целей.

Иногда встречаются наши разработки ни чем ни хуже, а иногда даже превосходящие всякие Query

Цитата:

Сообщение от Olegat (Сообщение 1714072)

Конечно jQuery сила. Но иногда она слишком громоздка и не без излишеств.

она неплохо настраиваема;)

Цитата:

Сообщение от Olegat (Сообщение 1714072)

Иногда встречаются наши разработки ни чем ни хуже, а иногда даже превосходящие всякие Query

пример в студию

Цитата:

Сообщение от Olegat (Сообщение 1714072)

для образовательных целей.

имхо тогда уж лучше будет взять jquery и править его - образования будет ГОРАЗДО больше, да и народу полезно, ибо если Вы напишите самостоятельный скрипт - мало кто им будет пользоваться и мало от него будет пользы, а если написать под тот же самый квери (прототип или подобные штуки), с настройками и т.д. и т.п., то немного поможете человечеству;)

Цитата:

Сообщение от Naked (Сообщение 1716223)

пример в студию

Календарик тут http://x-vim.info/index.php делал чтобы по месяцам блуждал без перезагрузки страницы и даты обновления сайта выводил. Люди с форума помигали Ajax освоить :)…
Вы на Query календарик выдели или какой у других разработок размер? Их на сайт, обычно, цеплять страшно.

Хочу своё «дерево - сайта» на Ajax сделать, на PHP обрисовку сделал (там же на сайте), да всё время не хватает Ajax подцепить.И «дерево» пока конфликтует с «Календрём» из-за общих функций слаед-панелей.

Календарей море, вот например красивый - http://www.dynarch.com/projects/calendar/

Цитата:

Сообщение от Hubbitus (Сообщение 1718187)

Календарей море, вот например красивый - http://www.dynarch.com/projects/calendar/

Календарей, реально – море. Но есть нонсенс …. Из любителей аякс библиотек не нашлось, ни одного который этот календарик к русскому сайту, по уму, «прикрутил». Т.к. польза в нем, как и в хорошо известных часах, на сайте – сомнительная, и увы, все они отличается своей необоснованной тяжеловесностью.

Цитата:

Сообщение от Olegat (Сообщение 1729204)

Из любителей аякс библиотек не нашлось, ни одного который этот календарик к русскому сайту, по уму, «прикрутил».

Какая разница, к русскому или нет??

И вообще, хватит оффтопить. Опишите наконец что не получается и в чем помощи просите!