анимация изображения javascript мигает между двумя изображениями - PullRequest
Новая
       9

анимация изображения javascript мигает между двумя изображениями

0 голосов
/ 13 сентября 2018

Привет, мне было интересно, кто-нибудь знает, как заставить два изображения переключаться между собой с интервалом в полсекунды? Кнопка «Пуск» запускает анимацию, кнопка «Стоп» останавливает ее на том, что отображается в данный момент Если вы можете показать мне, как по крайней мере получить анимацию, будьте счастливы. Остановка это просто бонус. 

var start;
function setTime()
{
  start = 1;
  carSchedule = setInterval(carChange, 500);
}

function carChange()
{   
  var imageData;
  if (start == 1)
  {
    imageData = document.getElementById("car");
    imageData.src = "https://dummyimage.com/600x400/000/fff";
  }

  else if(start == 2)
  {
    imageData = document.getElementById("car");
    imageData.src = "https://dummyimage.com/600x400/ff00ff/0011ff";
  }
}
<button onClick = "carChange()">Start Animation</button>
<button onCLick = "stop()">Strop Animation</button>
<br/>
<img id="car">

1 Ответ

0 голосов
/ 13 сентября 2018

Вы можете хранить свои изображения в Array и просматривать их, используя setInterval: 

let srcs = [
  'http://www.catster.com/wp-content/uploads/2017/08/A-fluffy-cat-looking-funny-surprised-or-concerned.jpg',
  'https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&h=350'
];

//Preload your images
let imgs = srcs.map(src => {
  let img = new Image();
  img.src = src;
  return img
});

let img = document.getElementById('car');

let current = 0; //Current image displayed
let interval;

const carChange = () => {
  interval = setInterval(() => {
    if (current + 1 > srcs.length - 1) current = 0;
    else current++;
    img.src = imgs[current].src
  }, 500);
}

const stop = () => {
  clearInterval(interval);
}
<button onClick="carChange()">Start Animation</button>
<button onCLick="stop()">Stop Animation</button>
<p><img id="car" /></p>
...