Image change every 30 seconds - loop

Question

I would like to make an image change after 30 seconds  The javascript I m using looks like this  var images   new Array    images 0     quot image1 jpg quot   images 1     quot image2 jpg quot   images 2     quot image3 jpg quot   setTimeout  quot changeImage   quot   30000   var x   0   function changeImage         document getElementById  quot img quot   src images x       x       HTML   lt img id  quot img quot  src  quot startpicture jpg quot  gt   Now I haven t tested this one yet  but if my calculations are correct it will work    Now what I also want is to make a  quot fading transition quot  and I would like the changing of images to loop  it restarts after all the images have been shown   Do any of you guys know how to do that

User · Answer

You should take a look at various javascript libraries, they should be able to help you out:

All of them have tutorials, and fade in/fade out is a basic usage.

For e.g. in jQuery:

var $img = $("img"), i = 0, speed = 200;
window.setInterval(function() {
  $img.fadeOut(speed, function() {
    $img.attr("src", images[(++i % images.length)]);
    $img.fadeIn(speed);
  });
}, 30000);

User · Answer

I agree with using frameworks for things like this  just because its easier  I hacked this up real quick  just fades an image out and then switches  also will not work in older versions of IE  But as you can see the code for the actual fade is much longer than the JQuery implementation posted by KARASZI Istv  n  function changeImage         var img   document getElementById  quot img quot        img src   images x       x                if x  gt   images length            x   0             fadeImg img  100  true       setTimeout  quot changeImage   quot   30000      function fadeImg el  val  fade        if fade     true            val--        else           val                      if val  gt  0  amp  amp  val  lt  100            el style opacity   val   100          setTimeout function    fadeImg el  val  fade      10            var images       x   0  images 0     quot image1 jpg quot   images 1     quot image2 jpg quot   images 2     quot image3 jpg quot   setTimeout  quot changeImage   quot   30000

User · Answer

setInterval function is the one that has to be used   Here is an example for the same without any fancy fading option  Simple Javascript that does an image change every 30 seconds  I have assumed that the images were kept in a separate images folder and hence  images  is present at the beginning of every image  You can have your own path as required to be set   CODE   var im   document getElementById  img     var images      images image1 jpg    images image2 jpg    images image3 jpg    var index 0   function changeImage       im setAttribute  src   images index      index      if index  gt   images length          index 0         setInterval changeImage  30000

User · Answer

Just use That Its Easy    lt script language  javascript  type  text javascript  gt       var images   new Array        images 0     img1 jpg        images 1     img2 jpg        images 2     img3 jpg        setInterval  changeImage     30000        var x 0        function changeImage                          document getElementById  img   src images x                  x                    if  images length    x                                         x   0                            lt  script gt    And in Body Write this Code -   lt img id  img  src  imgstart jpg  gt

[javascript] Image change every 30 seconds - loop

Examples related to javascript

Examples related to html

Examples related to image

Examples related to loops