Отображение последовательности изображений в 1 позиции, хранящейся в объекте js

Question

Я хотел бы иметь объект изображений, а затем перебирать их, чтобы отображать каждое изображение с определенным интервалом времени между каждым.

Сохранять изображения в объекте:

var images = [
  { name: 'image1', image: 'image1.jpg' }, 
  { name: 'image2', image: 'image2.jpg' }, 
  { name: 'image3', image: 'image3.jpg' }
]

Создайте цикл для прохождения каждого изображения в объекте, и каждый раз, когда он циклически проходит, он меняет источник div на изображение.

Наконец, я хотел бы, чтобы изображения перестали циклически проходить через цикл.кнопки нажата.

Пока у меня есть вышеупомянутая настройка объекта вместе с функцией, содержащей счетчик, который перебирает элементы в объекте.

 var add = (function() {
        var counter = images.length - 1;
        return function() {
            if(counter === images.length - 1) {
                counter = 0;
            } else {
                counter+=1;
            }
            return counter;
        }
    })();

Затем я использовал setInterval дляменяйте src каждые 0,5 секунды.

setInterval(
    function() {
     var imageDiv = document.getElementById('image');

     var tester = images[add()];

     imageDiv.src = tester.image;

    }
, 500);

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

Может кто-нибудь предоставить указатель, чтобы помочьмне обновить src?

Спасибо

Answer 1

Цикл здесь не нужен, вы можете вручную отслеживать текущее изображение, как я делал с переменной imgIndex, и увеличивать его при каждом вызове функции changeImg().Я установил для этой переменной значение 0 после того, как оно достигнет последнего изображения, поэтому оно будет повторять порядок изображений впоследствии.

В функции setInterval (2-й аргумент) вы можете установить время, в течение которого должно отображаться каждое изображение.

Вам не нужно беспокоиться о том, что изображения загружаются несколько раз, поскольку мы просто заменим атрибут src, который будет обрабатывать браузер.

Есть еще вопросы?

images = [
  {"name":"img1", "src":"https://phinest.com/wp-content/uploads/2017/02/Maya_Beano_Phinest_4-800x800.jpg"},
  {"name":"img2", "src":"https://www.pixel-creation.com/wp-content/uploads/3d-nature-wallpapers-wallpaper-cave-800x800.jpg"},
  {"name":"img3", "src":"https://img00.deviantart.net/5fdc/i/2009/162/9/0/nature_stock_14_by_dezzan_stock.jpg"},
  {"name":"img4", "src":"https://www.secretescapes.com/inlombardia/img/content/link--nature.jpg"},
  {"name":"img5", "src":"https://www.mappingmegan.com/wp-content/uploads/2017/04/sunset-2177324_1920-001.jpg"}
];
imgIndex = 0;

function changeImg(){
  document.getElementById("slideshow").src = images[imgIndex].src;
  if(images.length > imgIndex+1){
    imgIndex++;
  } else {
    imgIndex = 0;
  }
}

changeImg();
setInterval(changeImg, 2000)

<img id="slideshow" src=""/>

Answer 2

Я думаю, что у вас есть проблемы со счетчиком фн.Пожалуйста, попробуйте это;начинается с 0, заканчивается на images.length - 1, а затем перезапускается до 0:

var add = (function(len) {
  var counter = 0;
  return function() {
    if(counter === len) {
      counter = 0;
    }

    return counter++;
  }
})(images.length); // It's not required, but I also recommend you passing images.length as a parameter

Кроме того, если вы хотите остановить интервал, вам просто нужно сделать что-то вроде этого:

// Now myInterval is a numbered ID
var myInterval = setInterval(myFn, myTime);

// Something happens here and then..

// Your interval is stopped
clearInterval(myInterval);