Слайдер-карусель с z-index на JS - Веб-программирование

killhunter · 09.06.2010, 03:23

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

Код 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).

Olegat · 17.06.2010, 22:12

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

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

Hubbitus · 21.06.2010, 01:21

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

Olegat · 23.06.2010, 13:03

Цитата:

Сообщение от Hubbitus

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

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

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

Naked · 10.07.2010, 15:40

Цитата:

Сообщение от Olegat

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

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

Цитата:

Сообщение от Olegat

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

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

Цитата:

Сообщение от Olegat

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

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

Olegat · 18.07.2010, 19:01

Цитата:

Сообщение от Naked

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

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

…
Вы на Query календарик выдели или какой у других разработок размер? Их на сайт, обычно, цеплять страшно.

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

Hubbitus · 29.07.2010, 17:20

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

Olegat · 19.11.2010, 22:28

Цитата:

Сообщение от Hubbitus

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

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

Hubbitus · 20.11.2010, 16:38

Цитата:

Сообщение от Olegat

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

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

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

21.06.2010, 01:21	# 3
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	Так а в чем именно проблема, что не получается? И почему без фрэймворков? На jQuery это было бы много легче. __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

29.07.2010, 17:20	# 7
Hubbitus мод IMHO Кодер-200(6,7,8) Регистрация: 29.03.2003 Адрес: Saint-Petersburg, Russia Пол: Male Сообщения: 2 734	Календарей море, вот например красивый - http://www.dynarch.com/projects/calendar/ __________________ Я делаю Линукс! Присоединяйтесь к свободным людям! Связаться со мной всегда можно по джабберу: Hubbitus@jabber.ru Pahan-Hubbitus.

17.06.2010, 22:12	# 2
Olegat Newbie Регистрация: 16.12.2005 Сообщения: 24	Делать не пробовал, но как предложение... Карусель можно реализовать при помощи HTML тега бегущей строки MARQUEE. В неё можно вставлять картинки. Если получится изменить значение атрибута DIRECTION при помощи JS или аякс, то можно изменить направление движение карусели.