Introduction:
In this blog I am going to explain how we can change the image on a button click.
Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slide Show</title>
<script type="text/javascript">
var pics = new Array("Chrysanthemum.jpg", "Tulips.jpg", "ball.jpg");
var picCount = 0;
function PreviousImage() {
if (document.animatePics && picCount == 0) {
alert("You are on first slide");
}
else if (document.animatePics && picCount > 0) {
picCount--;
document.animatePics.src = pics[picCount];
}
}
function NextImage() {
if (document.animatePics && picCount == 2) {
alert("You are on last slide");
}
if (document.animatePics && picCount < 2) {
picCount++;
document.animatePics.src = pics[picCount];
}
}
</script>
</head>
<body>
<p>
<img name="animatePics" alt="" src="Chrysanthemum.jpg" style="height: 90px; width: 120px" />
<input id="btnPrevious" type="button" value="Previous" onclick="PreviousImage()" />
<input id="btnNext" type="button" value="Next" onclick="NextImage()" /></p>
</body>
</html>
Output:
When the previous button is pressed then if the image location is not at 0 position in the array then the counter is decremented and the image at just the previous location is shown . When the user presses the Next button then if the image is not last in the array location then the counter is incremented and the next image is shown.
Conclusion:
In this blog I explained about the concept of slideshow in JavaScript. How to change the image when the button is pressed.
Leave Comment