Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

TV Screen Slideshow Timed Image Rotation Script Tutorial

Published :
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]+'">'; i++; loopTimer = setTimeout('loop()',3000); } loop(); </script> </body> </html>