Wechsel zwischen zwei Bildern

Question

// Dieser Code soll ein Array von zwei Bildern erstellen und einfach durch die Bilder kreisen, damit eine Glühbirne ein- und ausgeschaltet wird.

var imageArray = new Array(); 

var numImages=2; 

// create new array to hold preload images; call this array imageArray 
// create (global!) variable called numImages to hold total number of images; 
//use for loop to populate imageArray  


for (var i = 0; i < numImages; i++) { 
imageArray[i] = new image(); 
imageArray[i].src="images/brightIdea"+(i+1)+"png" 
//set image src property to image path, preloading image in the process 

} 


var i4_circleThru = 0; // global variable (be careful) use for the function CicleThru() 

function circleThru() { 

//if browser does not support the image object, exit. 

// write images, from imageArray to HTML doc 

// call the setTimeout method on circleThru 

}//end circleThru() 

Answer 1

Da Ihr Endergebnis ein HTML-Bild ist, warum es auf diese Weise nicht tun:

Zuerst in Ihrem HTML:

<img id="imageID"> 

Dann in Ihrem Skript:

var imageArray = []; 
var numImages = 2; 
for (var i = 0; i < numImages; i++) { 
    imageArray[i] ="images/brightIdea"+(i+1)+".png" 
} 
var i4_circleThru = 0; 
var image = document.getElementById("imageId"); 
image.src = imageArray[i4_circleThru]; 

window.setInterval(function(){ 
    i4_circleThru = (i4_circleThru+1)%numImages; 
    image.src = imageArray[i4_circleThru]; 
},1000);   

Ein vollständigeres Beispiel finden Sie hier: https://jsfiddle.net/FrancisMacDougall/fseswsro/