Question

基本上我总共有30张图片。我想在我的网站上显示所有30张图片，但它不可行。所以我想一次显示10张图片。

因此，当页面加载时，显示前10个图像，然后单击“更多”按钮，显示接下来的10个，再次单击更多时，将显示最后10个。如果可能的话，它也可以使用前一个按钮！

旁注，需要从JavaScript文件中加载图像，因为一次加载的所有30张图片都不是一个选项！

Answer 1

假设您的图像名称按字母顺序排列，即img1.png，img2.png ... img30.png。下面的示例代码最初将显示10个图像，点击更多按钮后，它将显示另一个图像。

    <html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var pgidx = 1;
        var pgsize = 10;

        //do the initial laod
        showImage(pgidx);

        $("#more").click(function(){
            pgidx +=1;
            showImage(pgidx);
        });

        function showImage(curidx){
            var offset = (curidx-1) * pgsize;

            html = "";
            for (n=1; n<=pgsize; n++){
                html = html + '<img src="img' + (offset + n) + '.png" alt="" />';
            }

            $("#image_view").html(html);
        }



    });
</script>
</head>
<body>
<div id="image_view">
</div>
<button id="more">More</button>
</body>
</html>

在div中交换图像以获得不同的图像

1 个答案: