Change image in HTML page every few seconds

Question

I want to change images every few seconds  this is my code    lt  xml version    1 0  encoding    utf-8   gt   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN      http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt    lt html xmlns    http   www w3 org 1999 xhtml  gt      lt head gt         lt title gt change picture lt  title gt         lt script type    text javascript  gt       function changeImage             var img   document getElementById  img        img src   images x       x         if x  gt   images length           x   0            var timerid   setInterval changeImage    1000         var images       x   0  images 0     image1 jpg   images 1     image2 jpg   images 2     image3 jpg           lt  script gt      lt  head gt      lt body onload    changeImage    gt    lt img id  img  src  startpicture jpg  gt      lt  body gt   lt  html gt    My problem is its stuck on the first picture   I also wanted to try flipping through the pictures with previous and next buttons but I have no idea how to do that

User · Answer

As of current edited version of the post, you call setInterval at each change's end, adding a new "changer" with each new iterration. That means after first run, there's one of them ticking in memory, after 100 runs, 100 different changers change image 100 times every second, completely destroying performance and producing confusing results.

You only need to "prime" setInterval once. Remove it from function and place it inside onload instead of direct function call.

User · Answer

Change setTimeout  changeImage     30000   to setInterval  changeImage     30000   and remove var timerid   setInterval changeImage  30000

User · Answer

Best way to swap images with javascript with left vertical clickable thumbnails   SCRIPT FILE      function swapImages          window onload   function              var img   document getElementById  img wrap            var imgall   img getElementsByTagName  img            var firstimg   imgall 0     first image         for  var a   0  a  lt   imgall length  a                  setInterval function                      var rand   Math floor Math random     imgall length                   firstimg src   imgall rand  src                 3000                  imgall 1  onmouseover   function                         alert  what                    clearInterval                    firstimg src   imgall 1  src                              imgall 2  onmouseover   function                      clearInterval                    firstimg src   imgall 2  src                            imgall 3  onmouseover   function                      clearInterval                    firstimg src   imgall 3  src                            imgall 4  onmouseover   function                      clearInterval                    firstimg src   imgall 4  src                            imgall 5  onmouseover   function                      clearInterval                    firstimg src   imgall 5  src

User · Answer

As I posted in the comment you don t need to use both setTimeout   and setInterval    moreover you have a syntax error too  the one extra     Correct your code like this    edited to add two functions to force the next previous image to be shown    lt  DOCTYPE html gt    lt html gt      lt head gt         lt title gt change picture lt  title gt         lt script type    text javascript  gt            function displayNextImage                   x    x     images length - 1    0   x   1                document getElementById  img   src   images x                          function displayPreviousImage                   x    x  lt   0    images length - 1   x - 1                document getElementById  img   src   images x                          function startTimer                   setInterval displayNextImage  3000                          var images       x   -1            images 0     image1 jpg             images 1     image2 jpg             images 2     image3 jpg          lt  script gt      lt  head gt       lt body onload    startTimer    gt          lt img id  img  src  startpicture jpg   gt          lt button type  button  onclick  displayPreviousImage    gt Previous lt  button gt          lt button type  button  onclick  displayNextImage    gt Next lt  button gt      lt  body gt   lt  html gt

User · Answer

below will change link and banner every 10 seconds         lt script gt          var links     http   www abc com   http   www def com   http   www ghi com            var images     http   www abc com 1 gif   http   www def com 2 gif   http   www ghi com 3gif            var i   0          var renew   setInterval function                if links length    i                   i   0                            else               document getElementById  bannerImage   src   images i                document getElementById  bannerLink   href   links i                i                         10000            lt  script gt      lt a id  bannerLink  href  http   www abc com  onclick  void window open this href   return false   gt   lt img id  bannerImage  src  http   www abc com 1 gif  width  694  height  83  alt  some text  gt   lt  a gt

User · Answer

You can load the images at the beginning and change the css attributes to show every image   var images   array    for  url in your urls array       var img   document createElement   img          here the image attributes   width  height  position  etc      images push  img       function player  position       images position-1  style display    none    be careful working with the first position   images position  style display    block       reset position if needed   timer   setTimeOut   player  position     time

[javascript] Change image in HTML page every few seconds

Examples related to javascript

Examples related to html

Examples related to image

Examples related to timer