Как зациклить слайдер
Есть 9 картинок, смена присходит по 3 картинки, ширина картинки 130;есть анимация css.
<!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>
</ul>
</div>
<a href="#" class="arrow right-arrow" id="next">› </a>
</div>
<script>
var ul = document.getElementById('images');
var position=0;
document.getElementById('prev').onclick = function() {
if(position>-130*6)
{
position=position - 130*3;
ul.style.marginLeft = position + 'px';
}
};
document.getElementById('next').onclick = function() {
if(position<-20)
{
position=position + 130*3;
ul.style.marginLeft = position + 'px';
}
};
</script>
</body>
</html>
|
Сделал анимацию через js, вроде работает;
только в конце в список из картинок пришлось вставить 3 картинки(такие же как 3 первые картинки)
function animate(opts) {
var start = new Date; // сохранить время начала
var timer = setInterval(function() {
// вычислить сколько времени прошло
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
// отрисовать анимацию
opts.step(progress);
if (progress == 1) clearInterval(timer); // конец :)
}, opts.delay || 10); // по умолчанию кадр каждые 10мс
}
function stretch(elem) {
animate({
duration: 500, // время на анимацию 500 мс
step: function(progress) {
elem.style.marginLeft =b -progress*390 +'px';
position=b- progress*390 ;
}
});
}
function stretch1(elem) {
animate({
duration: 500, // время на анимацию 500 мс
step: function(progress) {
elem.style.marginLeft =b +progress*390 +'px';
position=b+ progress*390 ;
}
});
}
и вот такой код действия получился
document.getElementById('prev').onclick = function() {
if(position<-130*7) {
position=0; ul.style.marginLeft =0 +'px';b=position; stretch(ul);}
b=position;
stretch(ul);
};
|
| Часовой пояс GMT +3, время: 06:11. |