Доброго времени суток.
Задался целью сделать простую слайдер-карусель из трёх изображений.
Изучив ряд мануалов сделал вот что:
Код 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).