⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

TV Screen Slideshow Timed Image Rotation Script Tutorial

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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++;
	loopTimer = setTimeout('loop()',3000);
}
loop();
</script>
</body>
</html>
▲