In the homepage, there are 3 images and 2 buttons - next and previous. When the next button is clicked, the display changes to the next set of 3 images from a total of 100 images. Clicking on next again will show the subsequent 3 images, and on the third click, only the last image will be displayed. The same concept applies when clicking on the previous button. Below is an incomplete code snippet for reference:
<html>
<head>
<title>
Check! 1
</title>
<style type="text/css">
#myimage {
position:absolute;
left:800;
top:500;
height: 50px;
width: 50px;
}
#myimage1 {
position:absolute;
left:500;
top:500;
height: 50px;
width: 50px;
}
#imageDiv
{
position:static;
top: 50px;
left: 10px;
}
</style>
<script type="text/javascript">
var count=0;
function image(thisImg) {
var img = document.createElement("IMG");
img.src = "img/"+thisImg;
document.getElementById('imageDiv').appendChild(img);
}
function test()
{
//alert("just checking yaar");
if(count<4)
{
++count;
console.log("count",count);
if(count==1)
{
image('44585_Murree-Best-Hill-Station-wallpapers- pictures_640x320.jpg');
image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
image('gravityflue04-640x320.jpg');
}
else if(count==2)
{
image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg');
image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
image('gravityflue04-640x320.jpg');
}
else if(count==3)
{
image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg');
image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
image('gravityflue04-640x320.jpg');
}
else if(count==4)
{
image('44585_Murree-Best-Hill-Station-wallpapers-pictures_640x320.jpg');
image('91517_background-painting-used-Main-Menu-screen_640x320.jpg');
image('gravityflue04-640x320.jpg');
}
else
{
console.log("Invalid Count");
}
}
}
function test2()
{
if(count>0)
{
--count;
console.log("count",count);
}
else
{
console.log("Invalid Count");
}
}
</script>
</head>
<body>
<input type="image" id="myimage" value="next" name="next" src="next-button.jpg" onclick="test()">
<input type="image" id="myimage1" value="" name="next" src="111645-glowing-green-neon-icon-media-a-media31-back.png" onclick="test2()">