Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.01.2014, 17:44
Новичок на форуме
Отправить личное сообщение для Zemster Посмотреть профиль Найти все сообщения от Zemster
 
Регистрация: 27.12.2013
Сообщений: 6

Как зациклить слайдер
Есть 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>
Ответить с цитированием
  #2 (permalink)  
Старый 03.01.2014, 21:58
Новичок на форуме
Отправить личное сообщение для Zemster Посмотреть профиль Найти все сообщения от Zemster
 
Регистрация: 27.12.2013
Сообщений: 6

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





};

Последний раз редактировалось Zemster, 03.01.2014 в 22:02.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите сделать слайдер в слайдере как на mail.ru maksclub Ваши сайты и скрипты 1 04.08.2013 12:46
Как установить Ява слайдер? Sem_Klarck Общие вопросы Javascript 5 23.07.2013 14:57
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 00:35
слайдер как на forumspb.com utb Элементы интерфейса 1 08.11.2011 09:52
Как сделать слайдер картинок?!?! Risk Общие вопросы Javascript 1 07.06.2010 10:30