I am currently making a web page with an image inside of a div tag. I wrote a script to change the image after a certain amount of time, and it works fine when I test the script alone, however; when I attempt to place the script within my web page, it does not change the image.

Here is the code for my script:

<!DOCTYPE html>
<html>
    <body>
        <script>
            images = new Array;
            images[0] = "img2.gif";
            images[1] = "img3.gif";
            images[2] = "img4.gif";
            images[3] = "img5.gif";
            images[4] = "img6.gif";
            images[5] = "img7.gif";
            images[6] = "img8.gif";
            images[7] = "img9.gif";
            images[8] = "img10.gif";

            setInterval( function() {
                changeImage()
            }, 5000);

            x = 0;

            function changeImage() {
                document.getElementById('ad').src = images[x];

                if ( x < 8 ) {
                    x += 1;
                } else if ( x = 9 ) {
                    x = 0;
                }
            }
        </script>

        <img id='ad' src="img.gif">
    </body>
</html>

I have tested this script with the image inside of a div tag and it still works fine. When I put the same code into my web page, it does not work. Also note, the image file names are just examples. The images I am using are from photobucket, so I have very little control over what they are called. Any help I could get on this would be greatly appreciated.

Here is the code for my script:

<!DOCTYPE html>
<html>
    <body>
        <script>
            images = new Array;
            images[0] = "img2.gif";
            images[1] = "img3.gif";
            images[2] = "img4.gif";
            images[3] = "img5.gif";
            images[4] = "img6.gif";
            images[5] = "img7.gif";
            images[6] = "img8.gif";
            images[7] = "img9.gif";
            images[8] = "img10.gif";

            setInterval( function() {
                changeImage()
            }, 5000);

            x = 0;

            function changeImage() {
                document.getElementById('ad').src = images[x];

                if ( x < 8 ) {
                    x += 1;
                } else if ( x = 9 ) {
                    x = 0;
                }
            }
        </script>

        <img id='ad' src="img.gif">
    </body>
</html>

Share Improve this question edited Jul 3, 2013 at 20:23 Alexis Leclerc 1,3132 gold badges16 silver badges27 bronze badges asked Jul 3, 2013 at 20:15 Trevor Fisher 211 gold badge1 silver badge2 bronze badges

1 Check your console, it's probably throwing an error – tymeJV Commented Jul 3, 2013 at 20:18
1 test for equality if(x === 9) – sferret Commented Jul 3, 2013 at 20:20
I edited the formatting of your code (without correcting mistakes) for better readability, next time try to use indentation a little bit more! ;) – Alexis Leclerc Commented Jul 3, 2013 at 20:24
@sferret The other if should be if( x < 9 ) too – meiamsome Commented Jul 3, 2013 at 20:36

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

You need to put your code inside window.onload = function() {}

var images = new Array();
images[0] = "img2.gif";
images[1] = "img3.gif";
images[2] = "img4.gif";
images[3] = "img5.gif";
images[4] = "img6.gif";
images[5] = "img7.gif";
images[6] = "img8.gif";
images[7] = "img9.gif";
images[8] = "img10.gif";

function changeImage() {
  document.getElementById('ad').src = images[x];
  if (x<8) {
    x+=1;
  }

  else if (x===9) {
    x=0;
  }
}

window.onload = function() {
  var x = 0;
  setInterval(function() {
    changeImage()
  },5000);
}

Edit

This code has been tested on my local machine and works.

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
      var images = new Array();
      for (var i = 2; i < 11; i++) {
        images.push("img" + i + ".gif");
      }
      var x = 0;

      function changeImage() {
        document.getElementById('ad').src = images[x];
        document.getElementById('imgsrc').innerHTML = "<h1>" + images[x] + "</h1>";
        if (x < 8) {
          x += 1;
        } else {
          x = 0;
        }
      }
      window.onload = function() {
        setInterval(function () {
          changeImage();
        }, 1000);
      }
    </script>
  </head>
  <body>
    <img id="ad" src="img.gif" />
    <div id="imgsrc"><h1>img.gif</h1></div>
  </body>
</html>

Here is a fiddle of the final code working. JSFiddle doesn't like window.onload for some reason, so I had to exclude it. This doesn't really demonstrate my point, but I thought I'd just include it anyway.

Your code works to change the image src in this fiddle: http://jsfiddle/snB2a/1/

Try to rename your variables images and x to longer names. What can happen is, if some other code in your page, or worse, some code in one of the script file you page references, use variable "x" without declare it locally, then it would actually modify your "x" variable.

Here is an example to demonstrate the problem:

function something()
{
  for (x = 0; i < 10; x++)
    dosomethingelse();
}

If the above function is called in your page, then it will overwrite your "x" variable. The following code is safe:

function something()
{
  var x;
  for (x = 0; i < 10; x++)
    dosomethingelse();
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Javascript changing an image within a div after a certain amount of time - Stack Overflow

3 Answers 3

Edit

与本文相关的文章

评论列表(0)