JavaScript Slider

Make simple slider using pure JavaScript

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");
	}

Leave a Reply

Your email address will not be published. Required fields are marked *