Блог

я пытаюсь непрерывно менять изображения из массива, но код не получает источник изображения, почему это произошло?

 function nextPic(){
    var picCollection =["pic_bulbon.gif","pic_bulboff.gif"];
    for(i=0; i<picCollection.length; i  ){
        document.getElementById("myImage").src = picCollection[i].src;
    }
}

function triggers(){
    setInterval(nextPic,500);
}
 

Возможно, ваш код должен быть

 var picCollection =["pic_bulbon.gif","pic_bulboff.gif"];
var i=0;
var interval;
function nextPic(){
    document.getElementById("myImage").src = picCollection[i];
    // if you want to repeat for show image again and again tehn use below line
    i= (i 1) % picCollection.length;

    // if you want not to repeat again then use below line
    // if(i 1>=picCollection.length) clearInterval(interval);
   
}

function triggers(){
    interval=setInterval(nextPic,500);
}
 

Здесь вы должны определить массив имен изображений в глобальном, который должен быть доступен во всех функциях desire. Хорошо, если вы сохраните ссылку на setInterval в переменной и очистите ее с помощью clearInterval .

Вам нужно создать глобальную переменную для номера изображения. Затем используйте этот внутренний обратный вызов, переданный setInterval . Приведенный выше код покажет только последнее изображение массива.

 let pic = 0;
const picCollection =["pic_bulbon.gif","pic_bulboff.gif"];

function nextPic(){
  document.getElementById("myImage").src = picCollection[pic];
  console.log("The pic shown is ", picCollection[pic])
  pic  ;
  if(pic === picCollection.length){
    pic = 0;
  }
}

function triggers(){
    setInterval(nextPic,500);
}

triggers() 

 <img id="myImage"/> 

В вашем arrat нет src ключа. Вы можете просто использовать

document.getElementById("myImage").src = picCollection[i];

Ваш код должен выглядеть примерно так, как показано ниже

 function nextPic(){
  var picCollection = ["./pic_bulbon.gif","./pic_bulboff.gif"];

  for(i = 0; i < picCollection.length; i  ){
    document.getElementById("myImage").src = picCollection[i];
  }
}
 

"./pic_bulbon.gif" возможно, потребуется изменить в зависимости от вашей файловой структуры и того, где вы храните gif, к которому пытаетесь получить доступ.

Если бы вы могли предоставить скриншот вашей файловой структуры, я мог бы точно сказать вам, что вам нужно

Другая проблема, с которой вы сталкиваетесь, — это попытка получить доступ picCollection[i].src

но picCollection[i] это всего лишь массив строк, а не объектов.