TV Screen Slideshow Timed Image Rotation Script Tutorial
Learn to program an image rotation slideshow script for JavaScript HTML CSS projects. You can apply CSS transition property to this script to apply smooth transition animations to the image changing.
<!DOCTYPE html>
<html>
<head>
<style>
#myTV {
background-image:url(screen.jpg);
width:269px;
height:164px;
padding-top:20px;
}
#myScreen {
width:228px;
height:128px;
margin-left:21px;
}
</style>
</head>
<body>
<div id="myTV"><div id="myScreen"></div></div>
<script>
var myScreen = document.getElementById('myScreen');
var myPics = ['pic1.jpg','pic2.jpg','pic3.jpg'];
var totalPics = myPics.length;
var i = 0;
function loop() {
if(i > (totalPics - 1)){
i = 0;
}
myScreen.innerHTML = '<img src="screen_pics/'+myPics[i]+'">';
i++;
loopTimer = setTimeout('loop()',3000);
}
loop();
</script>
</body>
</html>