图片库缩略图

Question

我是Java新手，需要建立图片库。 我有一个图像目录：每个类别都有一个缩略图； 每个类别都有三张图片。

处理：单击缩略图，bigPic更改其src以显示您单击的图像。 可以单击bigPic下面的三个点以查看该类别中的其他图像（因此，如果选择了另一个缩略图，则传递给bigPic的src也会更改）

我尝试了几件事并环顾四周，但似乎无法使其正常工作。 这是我到目前为止的内容：

    <script>
        function backColor(a) {
            document.getElementById("bigPic").src = a;
        }
        function varE(e){
            var chosen = e;
            document.getElementsByName("firstDot").id = chosen;
        }
        function setM(m) {
            var chosenImage = m.id;
            document.getElementById("bigPic").src = chosenImage;
        }
    </script>

bigPic：

    <img class="bigPic" id="bigPic">

缩略图：

    <img class="thumb" src="categoryImageSRC" onclick="backColor('anotherImageSRC'); varE('otherImageSRC')">

点/圆显示类别中的另一幅图像：

    <img name="firstDot" id="" src="dotImageSRC" onclick="setM(this)">

任何有关如何做到这一点的想法，示例和更正都非常欢迎！ 谢谢！

Answer 1

按名称获取元素将返回元素数组，因此您需要在varE函数中更改此行

document.getElementsByName("firstDot").id = chosen;

至

document.getElementsByName("firstDot")[0].id = chosen;