Image Rotation using Java Script Simple Example | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

Hi In this example I demonstrate that how we can rotate set of images using simple java script code.

<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
var counter = 0;
var ctd;
var i = 0;
//Declare array of 3 images
var array = [“1.jpg”, “2.jpg”, “3.jpg”];
function start() {
//Set Interval method is java script method which is used to call a perticular method as
//per specified time interval
//Here we are calling startcounter method after 1 milisecond.
ctd = setInterval(“window.startcounter()”, 1000);
function startcounter() {
//Increament Index value
//When I value reached to 3 it will reset to 0, because we have only 3 images in array.
if (i == 3) {
i = 0;
//get Image as per index array
document.getElementById(‘img1’).src = array[i];
function stop() {
<br />
<!–Call Start() and Stop() methods on onmouseover and onmouseout event –>
<img id=”img1″ src=”1.jpg” width=”200px” onmouseover=”start()” onmouseout=”stop()” height=”200px” style=”border:3px solid blue” />

Download Source Code