Hosting Solutions
mobile_logo Table of Contents

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>

JavaScript Videos

Date and Time Programming

Digital Clock Tutorial Custom Animated ClockCountdown Timer Tutorial setTimeout clearTimeoutDate Time Countdown Tutorial Christmas 2012 DoomsdayScript Execution Timing Tutorial for Ajax Server CallsTV Screen Slideshow Timed Image Rotation Script Tutorial