Friday, 17 February 2012

Creating Slide Shows in JavaScripts

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Slideshow</title>
<script type="text/javascript">
var images = ['home_default.png','about_default.png','blog_default.png','logo.png'];
function nextImage() {
var img = document.getElementById("slideimage");
var imgname = img.name.split("_");
var index = imgname[1];
if (index == images.length - 1) {
index = 0;
} else {
index++;
}
img.src = images[index];
img.name = "image_" + index;
}
function prevImage() {
var img = document.getElementById("slideimage");
var imgname = img.name.split("_");
var index = imgname[1];
if (index == 0) {
index = images.length - 1;
} else {
index--;
}
img.src = images[index];
img.name = "image_" + index;
}
</script>
</head>
<body>
<p><img id="slideimage" name="image_0" src="home_default.png" alt="Home"></p>
<form name="slideform">
<input type="button" id="prevbtn" value="Previous" onClick="prevImage()">
<input type="button" id="nextbtn" value="Next" onClick="nextImage()">
</form>
</body>
</html>

No comments:

Post a Comment