Javascript TV Screen Slideshow Timed Image Rotation Script HTML CSS Tutorial

cheapest place to buy Keppra source url

Lesson Code:
Learn to program an image rotation slideshow script for Javascript HTML CSS projects with Adam Khoury. You can apply jQuery to this script to easily apply smooth transitions or program your own custom transtions between images. Source of inquery and location of initial discussion is:


32 thoughts on “Javascript TV Screen Slideshow Timed Image Rotation Script HTML CSS Tutorial”

  1. hi, thanks a lot for your grt tuts ,
    but the above example i tried its not working

    can u please check the error and rectify me that i pasted below 🙂

    var myScreen = document.getElementById("myscreen");
    var myPics = ["images/header1-bg.jpg","images/header2-bg.jpg","images/header3-bg.jpg"];
    var totalPics = myPics.length;
    var i = 0;

    function loop(){
    if(i > (totalPics – 1)){
    i = 0;
    myScreen.innerHTML = '<img src="images/' + myPics[i] + '">';
    var looptimer = setTimeout('loop()',2000);


  2. As always a great video Adam! At first i couldnt get this to work but after looking arround i found out the function call doessnt need the '' and () ———————–> loopTimer = setTimeout(loop,3000);

  3. Question to Adam
    below in a comment you wrote
    "Here are extra tips:
    1) You can apply jQuery direct to this script for easy transition animations."

    can you give me a tip on how to create a easy transitiion animation in javaScript without jQuerry?

  4. help where have i gone wrong lol
    <style type="text/css">
    {  background-image:url(screen.png);
    padding-top:20px;background-repeat:no-repeat;   }

     #myScreen {   width:228px;  height:128px; margin-left:21px;  }

     </HEAD>    <BODY>  
    <div id="myTv"><div id="myScreen"><script type ="text/javascript">  
    var myScreen = document.getElementById('myScreen');  
    var myPics = ['screen_pics/pic1.png','screen_pics/pic2.jpg','screen_pics/pic3.png'];   var totalPics = myPics.length;
     var i = 0;   function loop() {

    if(i > (totalPics – 1)) { i = 0; } myScreen.innerHTML = '<img scr="screen_pics/'+myPics[i]+'">'; i++ loopTimer = setTimeout ('loop ()',3000);   }   loop();    

    </BODY> </HTML>

  5. Can't get it to work with a separate .js file. Could you possible explain 

    myScreen.innerHTML = '<img src="screen_pics/'+myPics[i]+'">'

    my folder is "Imageslide" instead of screen_pics, and you never mentioned anything about were your pictures are stored, i.e on the home page or in a separate folder. Been working on this for over an hour and i can't get it work at all. Can you do a tutorial on this with how to get it to work with separate .JS for the code 

  6. Alright guys after checking around I realized his code will not work. Look elsewhere for how to do this. You should put the images in the head tag and then call them through source on the body. Something like this.

    var step=1;
    function slideits()
    document.slide.SOURCE = eval("image"+step+".SOURCE");

  7. Thanks for the video. The only thing is, I'm running into issues when trying to load my page after I've inserted the script. For some reason, none of the page will load now that I have added the js file. Any idea?

  8. Hiya Adam, Just wondering if there was any particular reason why you used a margin and a padding to adjust the position of the picture instead of using Margin-Top and Margin-Left of the Screen [Or Opposite]. Many Thanks, Chris

  9. Here are extra tips:
    1) You can apply jQuery direct to this script for easy transition animations.
    2) I placed the full img tag to show beginners that any HTML can be placed in the screen. You do not have to place a picture really, it can be swapped with any HTML code each X seconds.

  10. I've always avoided javascript cause I never really understood. Now I've worked with many other languages, and seeing this video and how easy it is to get started in javascript, I'm definitley going to use it.

    I think it was all the MySQL stuff messing me up in the past.

Leave a Reply

Your email address will not be published. Required fields are marked *