Question

为了澄清，我有一个使用JavaScript的简单幻灯片，功能很好。

首次点击任意按钮即可触发该事件，但后续按下按钮则需要您点击两次才能触发点击事件。

以下是JavaScript代码：

var images = new Array();
var i = 0,
    t, f = false;

images[0] = "Image1.jpg";
images[1] = "Image2.jpg";
images[2] = "Image3.jpg";


function start() {
    if (i >= images.length) {
        i = 0;
        document.getElementById('img').src = images[i];
        i++;
    } else {
        document.getElementById('img').src = images[i];
        i++;
    }
    t = setTimeout("start()", 2000);
}

function play() {
    if (f == false) {
        f = true;
        start();
    }
}

function Stop() {
    clearTimeout(t);
    f = false;
}

function next() {
    if (i >= images.length) {
        i = 0;
        document.getElementById('img').src = images[i];
        i++;
    } else {
        document.getElementById('img').src = images[i];
        i++;
    }
}

function previous() {
    if (i >= images.length) {
        i = images.length;
        document.getElementById('img').src = images[i];
        i--;
    } else if (i <= 0) {
        i = images.length;
        document.getElementById('img').src = images[i - 1];
        i--;
    } else if (i > images.length) {

        document.getElementById('img').src = images[images.length - i];
    } else if (i <= images.length || i > 0) {
        document.getElementById('img').src = images[i - 1];
        i--;
    }
}

HTML：

<table width="50%" border="0" cellspacing="10" cellpadding top="0" align="center">
    <tr>
        <td>
            <input type="button" value="Back" onclick="previous()" />
        </td>
        <td align="center"><a href="#"><img src="Image1.jpg" id="img"/></a>
        </td>
        <td>
            <input type="button" value="Next" onclick="next()" />
        </td>
    </tr>
    <tr>
        <td colspan="3" align="center" height="50">
            <input type="button" value="Play" onclick="play ()" />
            <input type="button" value="Stop" onclick="Stop()" />
        </td>
    </tr>
</table>

我一直在试图找出可能导致问题的原因，但我不知道如何调试代码，因为我不理解它。

Answer 1

因为您在递增i变量之前先加载了图像。

在这种情况下，您的变量i目前位于0（默认为您加载的图片）

因此，在您第一次点击时，它会将图片加载到索引0（这是默认图片），然后递增i。

并在第二次点击时将图片加载到索引1

我希望它可以帮到你

Answer 2

基本上你的问题是你在每个函数后增加了计数器，这是错误的。单击下一步后单击上一步，您将返回到相同的图像，在您看来没有任何事情发生。只有在需要时才应在相应功能开始时递增或递减计数器。

为您简化脚本。我还删除了无用的变量f，并使用另一个变量来保存数组计数（因为它是一个静态数组）。

var images = [
    "Image1.jpg",
    "Image2.jpg",
    "Image3.jpg"
];
var num = images.length;
var i = 0;
var t;

function play() {
    if(typeof t === 'undefined') {
        t = setInterval(next, 2000);
    }
}

function Stop() {
    if(t) clearInterval(t);
}

function next() {
    if(++i >= num) i = 0;
    document.getElementById('img').src = images[i];
}

function previous() {
    if(--i < 0) i = num-1;
    document.getElementById('img').src = images[i];
}

// Set once on page load
window.onload = function() {
    document.getElementById('img').src = images[0];
}

演示： http://jsfiddle.net/samliew/JLrDe/

JavaScript按钮单击需要两次点击的事件

2 个答案: