HTML Code:
<img id="mainImage" class="sliderImage" src="images/image1.jpg" alt="Slider Images" width="350" height="315">
JS Code:
var myImage = document.getElementById("mainImage");
var imageArray = ["images/image2.jpg","images/image3.jpg","images/image4.jpg",
"images/image5.jpg","images/image6.jpg","images/image7.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
var intervalHandle = setInterval(changeImage, 5000);
myImage.onclick = function() {
clearInterval(intervalHandle);
alert("You clicked the image");
}