//Create an Image Play – Pause Slide Show.
CSS Code
#container
{
height: 630px;
width: 1330px;
float: left;
}
#box
{
height: 400px;
width: 1000px;
float: left;
margin: 120px 165px;;
//margin-right: auto;
border: 1px solid;
}
.first
{
height: 99.5%;
width: 30%;
border: 1px solid;
margin-left: 47px;
float: left;
}
HTML Code
<html>
<head>
<title>Slide Show</title>
<link rel="stylesheet" type="text/css" href="slideshow.css">
<script type="text/javascript">
var temp="05.jpg";
var x;
function a () {
var img1=document.getElementById('img1');
var img2=document.getElementById('img2');
var img3=document.getElementById('img3');
var temp2;
temp2=img1.src;
img1.src=img2.src;
img2.src=img3.src;
img3.src=temp;
temp=temp2;
}
function b () {
// body...
window.clearInterval(x);
}
</script>
</head>
<body style="background:black;">
<div id="container">
<div id="box">
<div class="first" style="margin-left:0px">
<img src="02.jpg" height="100%" width="100%" id="img1" />
</div>
<div class="first">
<img src="01.jpg" height="100%" width="100%" id="img2" />
</div>
<div class="first">
<img src="03.jpg" height="100%" width="100%" id="img3" />
</div>
<form>
<input type="button" value="Start" id="start" onclick="x=window.setInterval('a()',1000);"
style="margin-top:20px; margin-left:16px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#506786; color:white; height:30px; width:55px; font-size:17px;" />
<input type="button" value="Stop" id="Stop" onclick="b()"
style="margin-top:20px; margin-left:16px; box-shadow: 1px 1px 2px 0px; border-radius:2px;
background:#506786; color:white; height:30px; width:55px; font-size:17px;" />
</form>
</div>
</div>
</body>
</html>
No comments:
Post a Comment