Форум

Zemster · #1 (**permalink**) 03.01.2014, 18:44

Есть 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">&#8249; </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">&#8250; </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>

Zemster · #2 (**permalink**) 03.01.2014, 22:58

Сделал анимацию через 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);





};

Форум

Справочник

Discord чат

Курсы javascript