图片库缩略图

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>

大图：

    <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;