87 lines
2.7 KiB
HTML
87 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<link rel="stylesheet" type="text/css" href="style.css">
|
||
<script src="animate.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="carousel">
|
||
<a href="#" class="arrow left-arrow" id="prev">‹ </a>
|
||
<div class="gallery">
|
||
<ul id="images">
|
||
<li><img src="https://js.cx/carousel/1.png"></li>
|
||
<li><img src="https://js.cx/carousel/2.png"></li>
|
||
<li><img src="https://js.cx/carousel/3.png"></li>
|
||
<li><img src="https://js.cx/carousel/4.png"></li>
|
||
<li><img src="https://js.cx/carousel/5.png"></li>
|
||
<li><img src="https://js.cx/carousel/6.png"></li>
|
||
<li><img src="https://js.cx/carousel/7.png"></li>
|
||
<li><img src="https://js.cx/carousel/8.png"></li>
|
||
<li><img src="https://js.cx/carousel/9.png"></li>
|
||
<li><img src="https://js.cx/carousel/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[i].style.position='relative';
|
||
var span = document.createElement('span');
|
||
span.style.cssText='position:absolute;left:0;top:0';
|
||
span.innerHTML = i+1;
|
||
lis[i].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 элемент
|
||
var newPosition = Math.min(position + width*count, 0);
|
||
animateProp({
|
||
elem: ul,
|
||
prop: "marginLeft",
|
||
start: position,
|
||
end: newPosition,
|
||
duration: 250,
|
||
delay: 20
|
||
});
|
||
position = newPosition;
|
||
return false;
|
||
}
|
||
|
||
document.getElementById('next').onclick = function() {
|
||
if (position <= -width*(imgs.length-count)) return false; // уже прокручено до конца вправо
|
||
|
||
// последнее передвижение вправо может быть не на 3, а на 2 или 1 элемент
|
||
var newPosition = Math.max(position-width*count, -width*(imgs.length-count));
|
||
|
||
animateProp({
|
||
elem: ul,
|
||
prop: "marginLeft",
|
||
start: position,
|
||
end: newPosition,
|
||
duration: 250,
|
||
delay: 20
|
||
});
|
||
position = newPosition;
|
||
return false;
|
||
};
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|