Question

我能够从this教程成功创建图片库。

现在我想要在我的图库中显示的图像出现问题。我希望尽可能多地显示图像，并且我想在缩略图中仅显示3或5个图像，然后用户可以根据需要继续按下下一个或上一个，但是当我尝试将图像放在它们上面时，它们都显示出来。 / p>

我尝试了padding，margin或overflow，但遗憾的是我无法得到我想要的结果。

我的HTML代码：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>sample gallery</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <style type="text/css">
        .active {
            border: 1px solid #ff0000;
        }
    </style>
    <script type="text/javascript">
        $(window).load(function () {
            (function () {
                $("#thumbs").find(".thumb:first").addClass("active");
                $("#large").find(".bigthumb:first").addClass("active");

                var getIndex = $("#thumbs").find(".active").index();

                $(".controls").each(function () {
                    console.log($(this).find(".nextgallery"));
                    $(this).find(".nextgallery").click(function () {
                        alert(".nextgallery");
                        getIndex = $("#thumbs").find(".active").index();
                        getIndex += 1;
                        if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
                            getIndex = 0;
                        }
                        setActiveImage(getIndex);
                    });
                    $(this).find(".prevgallery").click(function () {
                        alert(".prevgallery");
                        getIndex -= 1;
                        if (getIndex < 0) {
                            getIndex = $("#thumbs").find(".thumb").length - 1;
                        }
                        setActiveImage(getIndex); //Set/Show Active Image
                    });
                });

            })();

            function setActiveImage(index) {
                if (typeof (index) == "undefined" || index == "" || index == null) index = 0;

                $("#thumbs").find(".thumb").removeClass("active");
                $("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
                $("#large").find(".bigthumb").removeClass("active");
                $("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
            }
        });
    </script>
</head>
<body>
    <div id="panel">
        <div class="controls">
            <img src="http://placehold.it/50x50" alt="" style="height: 50px; width: 50px;" class="prevgallery">
            <span>Thumbnail Navigation 
            </span>
            <img src="http://placehold.it/50x50" alt="" style="height: 50px; width: 50px;" class="nextgallery">
        </div>
        <div id="thumbs">
            <div class="thumb active">
                <img src="http://placehold.it/50x50" alt="" width="100" height="80">
            </div>
            <div class="thumb">
                <img src="http://placehold.it/50x50" alt="" width="100" height="80">
            </div>
            <div class="thumb">
                <img src="http://placehold.it/50x50" alt="" width="100" height="80">
            </div>
            <div class="thumb">
                <img src="http://placehold.it/50x50" alt="" width="100" height="80">
            </div>
            <div class="thumb">
                <img src="http://placehold.it/50x50" alt="" width="100" height="80">
            </div>
        </div>
        <div class="controls" align="center" width="400px">
            <img src="http://placehold.it/50x50" alt="" style="height: 50px; width: 50px;" class="prevgallery">
            <span>Large Image Navigation 
            </span>
            <img src="http://placehold.it/50x50" alt="" style="height: 50px; width: 50px;" class="nextgallery">
        </div>
        <div id="large">
            <div class="bigthumb active">
                <img src="http://placehold.it/50x50" alt="">
            </div>
            <div class="bigthumb">
                <img src="http://placehold.it/50x50" alt="">
            </div>
            <div class="bigthumb">
                <img src="http://placehold.it/50x50" alt="">
            </div>
            <div class="bigthumb">
                <img src="http://placehold.it/50x50" alt="">
            </div>
            <div class="bigthumb">
                <img src="http://placehold.it/50x50" alt="">
            </div>
        </div>
    </div>
</body>
</html>

更新：

我希望像雅虎那样的画廊。 enter image description here 更新：如果图像超过5，如何隐藏其他图像的问题。

Answer 1

如果我能够查看你的代码，我会建议你进行一些改变来获得那种o / p。

直到现在你可以参考这些链接： http://rip747.github.io/Yahoo-style-news-slider-for-jQuery/ http://www.tn3gallery.com/

Answer 2

我无法为此找到完美答案，但我所做的只是放置显示：table-cell;并且只是计算隐藏图像的宽度和高度，我仍在努力弄明白

仅包含下一个和上一个按钮css或js的图库

2 个答案: