Javascript简单图库(没有JQuery)

时间:2014-11-18 04:50:55

标签: javascript arrays image-gallery

我无法理解为什么这个画廊不会工作。我希望能够点击缩略图来显示新的放大照片,但隐藏前一张照片。

我在这里创建了一个小提琴jsfiddle.net/gt2d1jna。

出于某种原因,在我的本地计算机上,第一个缩略图可以正常工作但其他缩略图都不起作用。

我知道这可以通过jQuery轻松完成,但我正在寻找一个普通的解决方案。

1 个答案:

答案 0 :(得分:0)

JSFiddle中的以下代码是否有帮助

http://jsfiddle.net/p7xLj0y6/2/

        var showbig = function(elmnt) {

        var bigimages = document.getElementById("bigImages");
        var images = bigimages.getElementsByClassName("image");

        var gallery = document.getElementById("gallery");
        var children = gallery.getElementsByTagName("div");
        var count = children.length;

        for(var i=0; i<count; i++) {

            if(children[i] == elmnt) {
                images[i].style.display = "block";
            } else {
                images[i].style.display = "none";
            }

        }

    }