Download Project Files Complete
<html>
<head>
<title>Slide Show</title>
<style>
html,body{
margin: 0;
padding: 0;
}
img{
width: 600px;
height: 400px;
}
#picbox{
border: 5px solid red;
margin: 0 auto;
width: 600px;
height: 400px;
}
#header
{
text-align: center;
text-transform: uppercase;
margin-bottom: 60px;
color: blue;
padding-top: 20px;
}
</style>
</head>
<body>
<div id="header">
<h1>Slide Show</h1>
<p>This is final project of lesson 1</p>
</div>
<div id="picbox"><img src="main.jpg" id="pictureBox"></div>
<script>
var imageBox = document.getElementById("pictureBox");
var imageList = ["image1.jpg" , "image2.jpg" , "image3.jpg"];
var i = 0;
function startSlides () {
imageBox.setAttribute("src" , imageList[i]);
i++;
if (i >= 3) {
i = 0;
};
}
setInterval(startSlides , 3000);
// see video tutorial if images are not working properly
</script>
</body>
</html>
No comments:
Post a Comment