Question

我有三个图像image1，image2，image3。我希望这种情况发生：

image1 appears when the page loads
image1 clicked-->image2 displays
image2 clicked-->image3 displays
image3 clciked-->image1 displays

目前这是实际发生的事情：

image1 clicked-->image3 displays
image3 clicked-->image1 displays
image1 clicked-->image2 displays
image2 clicked-->image3 displays
image3 clciked-->image1 displays

...并且循环继续正确。

为什么第一个周期没有加载图像2？我在下面附上了我的Javascript代码。感谢

<html>
<head>
</head>
<body>
    <div class="imagecentre"><img id="myButton" src="image1.jpg"/></div>
    <script type="text/javascript">


        var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
            i = 1;
        // event handler
        document.getElementById('myButton').addEventListener('click', function() 
            if (i==images.length-1){
            this.src=images[0];
            i=0;
            }

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

        }, false);

    </script>
</body>

Answer 1

最初设置i = 0。

   // i must be 0 initially.
   var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
       i = 0;

而且，正如Jono指出的那样，你错过了回调函数的开放{。

document.getElementById('myButton').addEventListener('click', function() {
   ...
}, false);

Answer 2

看看你的逻辑，当页面加载时，i == 1.这意味着点击“else”条件正在激活，因此加载图像[2]（这是数组中的第3个图像）

Answer 3

在页面加载时将i更改为0，并向点击回调函数添加缺少的{。

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
        i = 0;
    // event handler
    document.getElementById('myButton').addEventListener('click', function() {
        if (i==images.length-1){
        this.src=images[0];
        i=0;
        }

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

    }, false);

Answer 4

<html>
<head>
</head>
<body>
    <div class="imagecentre"><img id="myButton" src="image1.jpg" width="100px"/></div>
    <script type="text/javascript">


        var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'],
            i = 0;
        // event handler
        document.getElementById('myButton').addEventListener('click', function() {
            if (i==images.length-1){
            this.src=images[0];
            i=0;
            }

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

        }, false);

    </script>
</body>

放置i=0而不是i=1

为什么图像在JavaScript onClick事件中以不正确的方式显示？

4 个答案: