Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

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