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”>
<head>
<title></title>
<script>
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
i++;
//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() {
clearInterval(ctd);
}
</script>
</head>
<body>
<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” />
</body>
</html>