display array of images javascript code example

Example 1: array of images javascript

var imgArray = new Array();

imgArray[0] = new Image();
imgArray[0].src = 'images/img/Splash_image1.jpg';

imgArray[1] = new Image();
imgArray[1].src = 'images/img/Splash_image2.jpg';

/* ... more images ... */

imgArray[5] = new Image();
imgArray[5].src = 'images/img/Splash_image6.jpg';

/*------------------------------------*/

function nextImage(element)
{
    var img = document.getElementById(element);

    for(var i = 0; i < imgArray.length;i++)
    {
        if(imgArray[i].src == img.src) // << check this
        {
            if(i === imgArray.length){
                document.getElementById(element).src = imgArray[0].src;
                break;
            }
            document.getElementById(element).src = imgArray[i+1].src;
            break;
        }
    }
}

Example 2: array of images javascript

var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'images/anakin_starfighter.png';
imgArray[1] = new Image();
imgArray[1].src = 'images/obi_wan_starfighter.png';
imgArray[2] = new Image();
imgArray[2].src = 'images/naboo_starfighter.png';
imgArray[3] = new Image();
imgArray[3].src = 'images/darthvader.png';
imgArray[4] = new Image();
imgArray[4].src = 'images/x_wing.png';
// let robot1 = new Sprite(imgArray[0].src,window.document.getElementById("playground"),new Position(250,250),"robot")
let avion11 = new Sprite(imgArray[0].src,window.document.getElementById("playground"),new Position(75,0),"avion11")
let avion22 = new Sprite(imgArray[1].src,window.document.getElementById("playground"),new Position(550,150),"avion22")
let avion33 = new Sprite(imgArray[2].src,window.document.getElementById("playground"),new Position(0,150),"avion33")
let avion44 = new Sprite(imgArray[4].src,window.document.getElementById("playground"),new Position(550,350),"avion44")
let darthvader = new Sprite(imgArray[3].src,window.document.getElementById("playground"),new Position(150,75),"darthvader")

let  

const recPosition = function() {
	return{x:parseInt(this.style.left), y:parseInt(this.style.top)};
}

alert(imgArray[1].recPosition().x)
const aqua=document.getElementById("playground");
const Move=function(){
	const Move=function(){
		for(let i=0;i<imgArray.length;i++){
			let div = document.getElementsByTagName("img")[i].getAttribute("id");
			let photo = document.getElementById(div)
			let rect = photo.getBoundingClientRect();
			if(imgArray[i].x+50>=aqua.width){
				imgArray[i].rect.left=-1;	
			}
			else if(imgArray[i].x<=0){
				imgArray[i].rect.left=1;
			}
			imgArray[i].style.left+=imgArray[i].rect.left;

			if(imgArray[i].y+50>=aqua.height){
				imgArray[i].rect.top=-1;
			}
			else if(imgArray[i].y<=0){
				imgArray[i].rect.top=1;
			}
			imgArray[i].style.top+=imgArray[i].rect.top	;

		}
	}
}
const Animate=function(){
	Move()
	setTimeout(Animate,10);
}
// Animate();