Question

我正在尝试使用JavaScript onclick事件导航到缩略图图像的隐藏图库（div）。任何建议将不胜感激。提前谢谢。

以下是HTML的一个小剪辑：

<div id="gall1" class="gall">
    <img src="images/Vince1.jpg" height="50px" width="50px" alt="Vince1.jpg" onmouseover="showImage('Vince1.jpg');"/>
    <img src="images/Vince2.jpg" height="50px" width="50px" alt="Vince2.jpg" onmouseover="showImage('Vince2.jpg');"/>
    <img src="images/Vince3.jpg" height="50px" width="50px" alt="Vince3.jpg" onmouseover="showImage('Vince3.jpg');"/>
    <img src="images/Vince4.jpg" height="50px" width="50px" alt="Vince4.jpg" onmouseover="showImage('Vince4.jpg');"/>
    <img src="images/Vince5.jpg" height="50px" width="50px" alt="Vince5.jpg" onmouseover="showImage('Vince5.jpg');"/>
    <img src="images/Vince6.jpg" height="50px" width="50px" alt="Vince6.jpg" onmouseover="showImage('Vince6.jpg');"/>
</div>
<div id="gall2" class="gall">
    <img src="images/Martin1.jpg" height="50px" width="50px" alt="Martin1.jpg" onmouseover="showImage('Martin1.jpg');"/>
    <img src="images/Martin2.jpg" height="50px" width="50px" alt="Martin2.jpg" onmouseover="showImage('Martin2.jpg');"/>
    <img src="images/Martin3.jpg" height="50px" width="50px" alt="Martin3.jpg" onmouseover="showImage('Martin3.jpg');"/>
    <img src="images/Martin4.jpg" height="50px" width="50px" alt="Martin4.jpg" onmouseover="showImage('Martin4.jpg');"/>
    <img src="images/Martin5.jpg" height="50px" width="50px" alt="Martin5.jpg" onmouseover="showImage('Martin5.jpg');"/>
    <img src="images/zach.jpg" height="50px" width="50px" alt="zach.jpg" onmouseover="showImage('zach.jpg');"/>
</div>
<div id="navigate">
    <img src="images/previous.jpg" height="50px" width="50px" alt="previous" onclick="return prevGall();"/>
    <img src="images/next.jpg" height="50px" width="50px" alt="next" onclick="return nextGall();"/>
</div>

和JavaScript：

function showImage(imgName) 
{

    var largeImg = document.getElementById("large");
    var thePath = "images/";
    var theSource = thePath + imgName;

    largeImg.src = theSource;
    largeImg.alt = imgName;
}

function nextGall()
{
    var next = 0;
    var gallery = new Array();
    gallery = document.getElementByClassName("gall");


    if(next >= gallery.length)
    {
        next = 0;
    }

    next += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[next].style.dislpay = "block";
    return false;
}

Answer 1

document.getElementByClassName应为document.getElementsByClassName

所以：

var next = 0;
function nextGall()
{
    var gallery = document.getElementsByClassName("gall");


    if(next >= gallery.length)
    {
        next = 0;
    }

    next += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[next].style.display = "block";
    return false;
}

Answer 2

我认为你需要这个。

var next = 0;
function nextGall()
{

    var gallery = new Array();
    gallery = document.getElementByClassName("gall");


    if(next >= gallery.length)
    {
        next = 0;
    }

    next += 1;

    for (var x = 0; x < gallery.length; x++)
    {
        gallery[x].style.display = "none";
    }

    gallery[next].style.dislpay = "block";
    return false;
}

如何使用JavaScript显示下一个按钮以显示隐藏的缩略图库

2 个答案: