www.webdeveloper.com
Results 1 to 6 of 6

Thread: Change Image every 4 seconds in Javascript

Hybrid View

  1. #1
    Join Date
    Feb 2006
    Posts
    3

    Change Image every 4 seconds in Javascript

    Hello all,

    The code below supposed to change the displayed picture from pic1 to pic2 in 4 seconds after pressing the 1st picture, when i execute it after 4 seconds there is an error saying "Pic is Undefined", please help me find the problem?
    Thanx.

    Code:
    <head>
        <script type="text/javascript">
            function TimerSwitch(pic) {
                TimerRunning=true;
                var timer = setTimeout('SwitchPic(pic)', 4000);  
            }
            function SwitchPic(pic) {
                pic.src = "pic2.jpg";
            }
        </script>
    </head>
    <body>
        <img class="switch" src="pic1.jpg" onclick="TimerSwitch(this)" />
    </body>
    </html>

  2. #2
    Join Date
    Feb 2010
    Posts
    184
    Timeout executes the code globally so pic isn't defined. You need closure.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
          function TimerSwitch(pic) {
            TimerRunning=true;
            var timer = setTimeout(function() { SwitchPic(pic) }, 4000);
          }
          function SwitchPic(pic) {
            pic.src = "pic2.jpg";
          }
        </script>
      </head>
      <body>
        <img class="switch" src="pic1.jpg" alt="something" onclick="TimerSwitch(this)" />
      </body>
    </html>

  3. #3
    Join Date
    Feb 2006
    Posts
    3
    Thank you for the quick answer, it works perfectly

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    Code:
            function TimerSwitch(pic) {
                TimerRunning=true;
                var timer = setTimeout(function () {SwitchPic(pic);}, 4000);  
            }
    Has to be global if you pass a string to setTimeout.

    EDIT: Answered already, didn't see that.
    Great wit and madness are near allied, and fine a line their bounds divide.

  5. #5
    Join Date
    Aug 2013
    Posts
    1
    <head>

    <title>SLIDESHOW</title>

    <style type="text/css">
    body{background-color:black;color:white;}
    h1{font-family:tahoma;text-align:center;font-weight:bold;}
    #img{display:-webkit-box;-webkit-box-pack:center;opacity:0.8;}
    </style>
    <script type="text/javascript">
    var arr = new array();

    arr[0]= new image();
    arr[0].src = "1.jpg";

    arr[1]= new image();
    arr[1].src = "2.jpg";

    arr[2]= new image();
    arr[2].src = "2.jpg";

    </script>
    </head>
    <body onLoad="slide();">
    <h1>WELCOME</h1>
    <div id="img"><img id="image1" height="400px" width="600px" border="5" style="border-color:white;" /></div>

    <script type="text/javascript">
    var i=0;
    function slide() {
    document.getElementById("image1").src= arr[i];
    i++;
    if(i==arr.length){i=0;};
    setTimeout("slide()",2000);
    }
    </script>

    </body>
    </html>

    please help me out with this code.. i tried my level best but failed..

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    body{background-color:black;color:white;}
    h1{font-family:tahoma;text-align:center;font-weight:bold;}
    #img{display:-webkit-box;-webkit-box-pack:center;opacity:0.8;}
    </style>
    <script type="text/javascript">
    
    var arr = [];
    
    arr[0]= new Image();
    arr[0].src = "http://www.vicsjavascripts.org.uk/StdImages/1.gif";
    
    arr[1]= new Image();
    arr[1].src = "http://www.vicsjavascripts.org.uk/StdImages/2.gif";
    
    arr[2]= new Image();
    arr[2].src = "http://www.vicsjavascripts.org.uk/StdImages/3.gif";
    
    var i=0;
    
    function slide(){
     document.getElementById("image1").src= arr[i].src;
     i++;
     if(i==arr.length){
      i=0;
     }
     setTimeout(function(){ slide(); },2000);
    }
    
    </script>
    </head>
    
    <body onLoad="slide('image1',arr);">
    <h1>WELCOME</h1>
    <div id="img"><img id="image1" height="400px" width="600px" border="5" style="border-color:white;" /></div>
    
    
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles