How to make a web page picture change with time

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to make a web page picture change with time
(Comstock Images/Comstock/Getty Images)

Web pages use JavaScript code to make various things happen at set time intervals. This is Client Side code, and therefore takes place within the Web browser, executing as the visitor is viewing and interacting with your page. Changing images makes the experience of viewing a Web page more dynamic, and it is an effect that is easy to implement and requires only a small amount of JavaScript code in order to function.

Skill level:

Other People Are Reading


  1. 1

    Prepare your pictures. Make sure your Web images are cropped to the correct size, preferably all the same size so that they can be effectively displayed in your Web pages without upsetting the other content. Try to minimise the file sizes, keeping them as small as possible while making sure they're still good quality. Give your images names that reflect some numerical sequence (for example, "pic1.jpg" then "pic2.jpg") so that the only identifying feature is the number.

  2. 2

    Create your Web page using HTML structures. Use the following outline, changing the image file name to suit your own:





    <div><img id="picture" src="pic1.jpg" alt="picture" /></div>



    In this case, the images must be in the same directory as the Web page. The structure initially holds the first image to be displayed.

  3. 3

    Add JavaScript code to keep time. Insert the following in your page head section:

    <script type="text/JavaScript">

    var currPic=1;

    var totPics=3;

    var keep Time;

    function setupPicChange()

    { keepTime=setTimeout("changePic()", 5000); }

    function changePic()

    { currPic++; if(currPic>tot Pics) currPic=1;


    setupPicChange(); }


    Change the "totPics" number to suit however many images you have.

  4. 4

    Set the page up to start the timer. Add to your page body element as follows:

    <body onload="setupPicChange();">

    This makes the timer start when the page is loaded. After five seconds the picture is changed to the next in the sequence and the timer starts keeping count again. The sequence number is started at 1 and incremented every time the timer runs out, so that the picture changes its source attribute to the next in the sequence. Alternatively name your images whatever you like and store their file names in an array, looping through this instead of using a sequence number.

  5. 5

    Listen for user interaction with your Web page. Depending on the purpose of your page, you may want to alter the way it functions as the user interacts with it. For example, to stop the image from changing while the user has her mouse hovered over it, add the following to your image code:

    <img id="picture" src="pic1.jpg" alt="picture" onmouseover="stop Timer();" onmouseout="start Timer();" />

    Add to the JavaScript:

    function stop Timer()

    { clear Timeout(keepTime); }

    function start Timer()

    { keepTime=setTimeout("changePic()", 5000); }

Tips and warnings

  • Do a Web search for free JavaScript resources that allow you to create dynamic effects such as animation and transition between images.
  • JavaScript sometimes behaves very differently in certain Web browsers, so it's worth testing to make sure your effects work for as many users as possible.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.