Форум Сайтостроение Веб-строительство

Нужна помощь с каруселью изображений

RM
На сайте с 22.07.2013
Offline
3
RuMeds
369

Нужна помощь с каруселью изображений!

Есть скрипт:


<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<div class="carousel">
<a href="#" class="arrow left-arrow" id="prev">‹ </a>
<div class="gallery">
<ul id="images">
<li><img src="1.png"></li>
<li><img src="2.png"></li>
<li><img src="3.png"></li>
<li><img src="4.png"></li>
<li><img src="5.png"></li>
<li><img src="6.png"></li>
<li><img src="7.png"></li>
<li><img src="8.png"></li>
<li><img src="9.png"></li>
<li><img src="10.png"></li>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next">› </a>
</div>

<script>

/* этот код помечает картинки, для удобства разработки */
var lis = document.getElementsByTagName('li');
for(var i=0; i<lis.length; i++) {
lis.style.position='relative';
var span = document.createElement('span');
// обычно лучше использовать CSS-классы,
// но этот код - для удобства разработки, так что не будем трогать стили
span.style.cssText='position:absolute;left:0;top:0';
span.innerHTML = i+1;
lis.appendChild(span);
}

/* конфигурация */
var width = 130; // ширина изображения
var count = 3; // количество изображений

var ul = document.getElementById('images');
var imgs = ul.getElementsByTagName('li');

var position = 0; // текущий сдвиг влево

document.getElementById('prev').onclick = function() {
if (position >= 0) return false; // уже до упора

// последнее передвижение влево может быть не на 3, а на 2 или 1 элемент
position = Math.min(position + width*count, 0)
ul.style.marginLeft = position + 'px';
return false;
}

document.getElementById('next').onclick = function() {
if (position <= -width*(imgs.length-count)) return false; // уже до упора

// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
position = Math.max(position-width*count, -width*(imgs.length-count));
ul.style.marginLeft = position + 'px';
return false;
};

</script>
</body>
</html>

Скрипт отлично работает, но у меня задача, поставить 3 таких карусели на одной странице.

Для второй и третий карусели пробовал в конце добавлять цифры:

id="prev" на id="prev2"

id="next" на id="next2"

id="images" на id="images2"

getElementById('images'); на getElementById('images2');

Но результатов это не принесло, подскажите что не так.

Ссылка на скрипт: http://learn.javascript.ru/play/tutorial/browser/events/carousel/index.html

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий