Динамически запускать слайдшоу назад и вперед с помощью jQuery - PullRequest
Новая
       7

Динамически запускать слайдшоу назад и вперед с помощью jQuery

0 голосов
/ 27 сентября 2019

У меня есть контейнер DIV, а внутри у меня есть дочерние изображения.что-то вроде этой структуры: 

<div class="look-down">
  <img src="look-down-1.jpg">
  <img src="look-down-2.jpg">
  <img src="look-down-3.jpg">
  <img src="look-down-4.jpg">
  <img src="look-down-5.jpg">
</div>

Все изображения скрыты при любом отображении: нет;или - непрозрачность: 0;

Теперь у меня есть кнопка: «Запустить анимацию» и «Запустить анимацию в обратном направлении» 

<button id="animate-images">Run Animation</button>
<button id="animate-images-reverse">Run Animation Backwards</button>

При нажатии на «Запустить анимацию» я хочу выполнить циклчерез все изображения и начиная с первой и двигаться рядом со второй показывая следующую фотографию.в основном это покажет анимацию «кадр за кадром», с помощью которой я могу контролировать темп

После нажатия «Запустить анимацию в обратном направлении», я бы хотел увидеть то же самое в обратном направлении.в основном, наоборот, анимация

2 важные вещи:

  • Мне нужно, чтобы он был динамичным, чтобы я мог добавлять / удалять изображения
  • Мне нужно контролировать, сколько секунд /мили секунды между каждым изображением

Я создал стартовую скрипку: https://jsfiddle.net/hamergil/jdg1fy9q/30/

Буду признателен за любую помощь

Ответы [ 3 ]

1 голос
/ 27 сентября 2019

Вы можете анимировать непрозрачность изображений с помощью .each() функции итератора: 

  $('.lookdown img').each(function() {
    $(this).delay(delay).animate({
      opacity: 1
    }, 500);
    delay += 500;
  });

https://jsfiddle.net/ow0Lu21h/

0 голосов
/ 27 сентября 2019

С приближением отложенной анимации в цикле изображения вы столкнетесь с множеством проблем и крайних случаев, в основном из-за возможности реверсирования анимации.Самый простой способ избежать всех потенциальных проблем - использовать другой принцип анимации: работая с интервалом в окне и постоянно запрашивая текущее направление анимации, вы можете обеспечить целостность анимации.

В моем коде я работаю с тайм-аутами, которые дадут вам возможность иметь гораздо более быстрый интервал опроса, когда анимация приостановлена ​​- но во время работы она всегда ждет завершения перехода перед изменениемнаправление. 

var intv = function() {
  if(direction === 0) return window.setTimeout(intv, interval);
  var next = position + direction < 0 ? images.length - 1 : position + direction >= images.length ? 0 : position + direction;
  $(images[position]).fadeOut(transition);
  $(images[next]).fadeIn(transition);
  position = next;
  return window.setTimeout(intv, showtime + transition);
};

https://jsfiddle.net/jdx0zufa/

Вы можете изменить этот код на другое поведение, просто изменив расчет next - например, когда он достиг конца и движется вперед, изменитенаправление назад и т. д.

0 голосов
/ 27 сентября 2019

Попробуйте это: 

var delay = 0;
var pace = 1000;  // 1 second
  $('.lookdown img').each(function() {
    $(this).delay(delay).animate({
      opacity: 1
    }, pace);
    delay += pace;
  });
...