Write a JavaScript program for ImageSlideShow?
Conditions:
a) Create a html page that has 10 images in it.
b) Create a slideshow that displays images with the gap of 2 seconds.
c) There should be counter on the screen that displays the total number of images, images already shown
and images left in the queue should also be shown as a status.
d) Display page content in the middle of the page in proper alignment
e) Try to prepare a good looking html page .
f) You are only allowed to use html for design the page and javascript for scripting logic.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Slide Show</title>
<script>
var ind=0;
var pre=0;
function valid(){
setTimeout(function(){slide()},1000);
}
function slide()
{
if(ind<8){
var imgArr=["Blue hills.jpg","Sunset.jpg","Water lilies.jpg","Winter.jpg","Bluei.jpg","Bluei1.jpg","Bluei2.jpg","Bluei3.jpg"];
var content="<img src='"+imgArr[ind]+"' width='200' height='200'>";
document.getElementById('pp').innerHTML=content;
document.getElementById('pre').value=ind;
document.getElementById('now').value=ind+1;
document.getElementById('next').value=imgArr.length-ind-1;
ind=ind+1;
valid();
}
}
</script>
</head>
<body>
<form><div><p id='pp'><br><input type='button' id='sta' value='Start' onclick='return valid()'></p><br>
Previous <input type='text' id='pre'>
Present:<input type='text' id='now'>
Remain:<input type='text' id='next'>
</div></form>
</body>
</html>
Conditions:
a) Create a html page that has 10 images in it.
b) Create a slideshow that displays images with the gap of 2 seconds.
c) There should be counter on the screen that displays the total number of images, images already shown
and images left in the queue should also be shown as a status.
d) Display page content in the middle of the page in proper alignment
e) Try to prepare a good looking html page .
f) You are only allowed to use html for design the page and javascript for scripting logic.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Slide Show</title>
<script>
var ind=0;
var pre=0;
function valid(){
setTimeout(function(){slide()},1000);
}
function slide()
{
if(ind<8){
var imgArr=["Blue hills.jpg","Sunset.jpg","Water lilies.jpg","Winter.jpg","Bluei.jpg","Bluei1.jpg","Bluei2.jpg","Bluei3.jpg"];
var content="<img src='"+imgArr[ind]+"' width='200' height='200'>";
document.getElementById('pp').innerHTML=content;
document.getElementById('pre').value=ind;
document.getElementById('now').value=ind+1;
document.getElementById('next').value=imgArr.length-ind-1;
ind=ind+1;
valid();
}
}
</script>
</head>
<body>
<form><div><p id='pp'><br><input type='button' id='sta' value='Start' onclick='return valid()'></p><br>
Previous <input type='text' id='pre'>
Present:<input type='text' id='now'>
Remain:<input type='text' id='next'>
</div></form>
</body>
</html>
No comments:
Post a Comment