Image Loop

by Santosh Thakur

HTML

<img src="https://media.expedia.com/hotels/5000000/4580000/4574000/4573993/4573993_23_b.jpg" id="mainImage" alt="Looking out at the Pacific" width="350" height="315" class="articleImage" />

JavaScript

var myImage = document.getElementById("mainImage");
var imageArray = [
  "https://media.expedia.com/hotels/5000000/4580000/4574000/4573993/4573993_23_b.jpg",
  "https://media.expedia.com/hotels/3000000/2790000/2781600/2781573/2781573_41_b.jpg",
  "https://media.expedia.com/hotels/1000000/60000/58400/58316/58316_467_b.jpg",
  "https://media.expedia.com/hotels/1000000/540000/533500/533436/533436_415_b.jpg",
  "https://media.expedia.com/hotels/6000000/5540000/5532900/5532837/5532837_46_b.jpg",
  "https://media.expedia.com/hotels/4000000/3820000/3814100/3814029/3814029_88_b.jpg"
];
var i = 0;
function changeImage() {
  myImage.setAttribute("src", imageArray[i]);
  i++;
  if (i >= imageArray.length) {
    i = 0;
  }
}
var intervalHandle = setInterval(changeImage, 1000);

myImage.onclick = function() {
	alert("Now Image will not animate");
  clearInterval(intervalHandle);
};