Question

本网站的第一个问题，所以我希望我做对了！我有一个javascript函数，我想在页面加载时显示图像（image1.jpg），然后每2秒通过循环更改图像。但是只显示第一个图像所以似乎没有调用JS函数。任何人都可以告诉我，如果我在这里做错了，因为它对我来说很好，所以无法理解为什么它不起作用。感谢

<html>
    <head>      
        <script type="text/javascript">
            function displayImages(){
                var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
                var i = 1;

                if(i>images.length-1){
                    this.src=images[0];
                    i=1;
                }else{
                    this.src=images[i];
                    i++;
                }
                setTimeout("displayImages()", 2000);
            }
        </script>
    </head>

    <body onload="displayImages();">
        <img id="myButton" src="image1.jpg" />
    </body>
</html>

Answer 1

您需要移动线

var i = 1;

在外面 displayImages -function，或者每次都从一个开始！

编辑：但是使用全局变量不被认为是好习惯，所以你可以使用闭包。另外，如其他答案中所述，您引用的this并未引用图像对象，所以我更正了这一点并简化了逻辑：

<script type="text/javascript">
 function displayImages( i ){
   var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
   var img = document.getElementById('myButton');
   img.src = images[i];
   i = (i+1) % images.length;
   setTimeout( function() { displayImages(i); }, 2000 );
}
</script>
<body onload="displayImages(0);">

Answer 2

您需要在每次调用时使用i的值，可以使用以下内容将其保存在闭包中：

var displayImages = (function() {
  var i = 0;
  var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
  return function() {
    document.getElementById('myButton').src = images[i++ % images.length];
    setTimeout(displayImages, 2000);
  }
}());

此外，由于此未通过调用设置，因此它将默认为全局/窗口对象，因此您需要获取对图像的引用。这也可以关闭。

Answer 3

您每次都要重新初始化i的值，因此请更改以下内容：

function displayImages(){
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
    if(!displayImages.i || displayImages.i >= images.length) displayImages.i = 0;
    document.getElementById('myButton').src = images[displayImages.i];
    displayImages.i++;
    setTimeout(displayImages, 2000);
}

函数是JS中的对象，因此：

您可以通过引用传递它们，而不是作为提高性能和可读性的字符串
您可以像使用displayImages.i

编辑：我已经意识到还有一个问题src未设置为按钮。
现在我已经解决了这个问题并进行了其他改进。

以下是小提琴http://jsfiddle.net/aD4Kj/3/仅将图片网址更改为实际显示内容。

Answer 4

这里有一些问题阻止了这项工作。

首先，需要将var i = 1;移到函数外部以使增量工作。另请注意，数组中的第一项是0，而不是1。

其次，您使用this来引用更改图片src，但this不是对图片的引用。最好的办法是使用此处document.getElementById代替。

var i, button;

i = 0;
button = document.getElementById('myButton');

function displayImages() {
    var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

    if (i > images.length - 1){
        button.src = images[0];
        i = 0;
    }

    else{
        button.src = images[i];
        i++;
    }

    setTimeout(displayImages, 2000);
}

还有一些改进和优化的空间，但这应该可行。

Answer 5

<html>
<head>
    <script type="text/javascript">
        var i = 1;
        function displayImages() {
            var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
            i++;
            if (i > images.length - 1) {           
                i = 0;
            }
            $('#myButton').attr('src', images[i]);
            setTimeout(displayImages, 2000);
        }
    </script></head>

<body onload="displayImages();">
    <img id="myButton" src="img1.jpg" height="150px" width="150px"/>
</body>
</html>

让我全球化。

Answer 6

  <script type="text/javascript">
           var i = 1;
            function displayImages(){
            .......
            ........

只要让“我”全球化。因此，每当调用displayImages时，它都不会重新定义为1。

Answer 7

这里你正在使用递归的displayImages()和索引i的变量。 e i在函数displayImages()中指定为局部变量，您需要为其分配全局变量，即函数外部也从i=0初始化它，因为数组索引总是从0开始，

您的代码变为

        var i = 0; // assign i global
        function displayImages(){


       var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];



       if(i>images.length-1){

       document.getElementById('myButton').src=images[0]; //get img by id
       i=0;         // to get first image
       }

       else{

       document.getElementById('myButton').src=images[i]; //get img by id
       i++;
       }
       setTimeout("displayImages()", 2000);

    }

为什么没有调用Javascript函数？

7 个答案: