Question

请帮忙！我已经破解了好几天但没有用... :(我无法隐藏/显示上一个/下一个按钮，如下所示......

我有3个图像阵列。使用上一个/下一个按钮显示每个单独的图像。方案如下：

显示P1图像：隐藏上一个按钮，显示下一个按钮
显示P2图像：显示上一个＆amp;下一步按钮
显示P3图像：隐藏下一个按钮，显示上一个按钮

我的代码如下：

使用Javascript：

var myPix = new Array()

myPix[0] = 'P1.jpg'
myPix[1] = 'P2.jpg'
myPix[2] = 'P3.jpg'

var thisPic = 0

function doPrevious() {
    if (document.images && thisPic > 0) {
        thisPic--
        document.myPicture.src=myPix[thisPic]
    }
}

function doNext() {
    if (document.images && thisPic < 2) {
        thisPic++
        document.myPicture.src=myPix[thisPic]
    }
}

HTML code：

<td height="47" align="right">
    <a href="javascript:doPrevious()" title="Previous">
        <img src="PrevBtn.jpg" width="120" height="35" border="0" />
    </a>
    <a href="javascript:doNext()" title="Next">
        <img src="NextBtn.jpg" width="120" height="35" border="0" />
    </a>
</td>

此处显示的图片：

<table border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td>
            <img id="pic" name="myPicture" src="P1.jpg" />
        </td>
    </tr>
</table>

Answer 1

尝试将if语句中的常量更改为1，因为您希望仅当thisPic = 2时隐藏“下一个”图片，并且当thisPic = 0时隐藏“prev”。

查看带有* .style.display的行，看看你是否得到了他们正在做的事情。查找html属性和属性可能会有所帮助。 http://www.w3schools.com/jsref/prop_style_display.asp

function doPrevious() {
    var pic = document.getElementById("pic");
    var next = document.getElementById("next");
    if (document.images && thisPic > 1) {
        thisPic--;
        pic.src=myPix[thisPic];
        next.style.display = "none";
    }
    else document.getElementById("next").style.display = "block";
}

function doNext() {
    var pic = document.getElementById("pic");
    var prev = document.getElementById("prev");
    if (document.images && thisPic < 1) {
        thisPic++;
        pic.src=myPix[thisPic];
        prev.style.display = "none";
    }
    else prev.style.display = "block";
}

编辑您的html以提供prevBtn和NextBtn ID，如下所示：

<td height="47" align="right"><a href="javascript:doPrevious()" title="Previous"><img src="PrevBtn.jpg" id = "prev" width="120" height="35" border="0" /></a>

然后您可以在需要时调用document.getElementById（id）并将其style属性更改为“none”，如上所述。

显示图像数组时隐藏/显示图像按钮

1 个答案: