使用Jquery或Javascript循环浏览一堆小化身的最佳方式

我有一个连接到API的PHP脚本，可以抓取大约200个化身。我想在我的页面上显示其中的25个，但有一个“更多”按钮供用户按下，该按钮将淡出这25个，然后显示下一个25个。当它到达头像的末尾时，我希望“更多”按钮再次循环到开始

我不确定最好的方法是什么，我是否应该加载所有200个图像，但将最后175个设置为不可见，然后通过Javascript和JQuery执行，这有意义吗

---

我知道我在问一个令人困惑的问题。我基本上只想一次显示25个，而不是200个，我不确定具体的JQuery或Javascript方式。我同意，它有无限滚动的方法，看起来很酷。

我同意，它有无限滚动的方法，看起来很酷。

假设你的更多链接有一个id：“更多链接”，您的图像容器有一个id“images”。然后它看起来像这样：

$(function() {
    var avatars = [], position=0;

    $.get("/avatars").then(function(list) {
        avatars = list;
        show_25();
    });

    function show_25() {
        for(var i = position; Math.min(i,list.length) < 25+position; i++) {
            $("<img />").attr("src",list[i]).appendTo("#images");
        }

        position += 25;

        if( position > list.length ) {
            $("#more-link").hide();
        }
    }

    $("#more-link").click(show_25);
});

$（函数（）{
变量化身=[]，位置=0；
$.get（“/avatars”）。然后（函数（列表）{
化身=列表；
show_25（）；
});
函数show_25（）{
对于（var i=位置；Math.min（i，list.length）<25+位置；i++）{
$（“list.length）{
$（“#更多链接”）.hide（）；
}
}
$（“#更多链接”）。单击（显示25）；
});

假设您的“更多”链接有一个id：“更多链接”，而您的图像容器有一个id“图像”。那么它看起来像这样：

$(function() {
    var avatars = [], position=0;

    $.get("/avatars").then(function(list) {
        avatars = list;
        show_25();
    });

    function show_25() {
        for(var i = position; Math.min(i,list.length) < 25+position; i++) {
            $("<img />").attr("src",list[i]).appendTo("#images");
        }

        position += 25;

        if( position > list.length ) {
            $("#more-link").hide();
        }
    }

    $("#more-link").click(show_25);
});

$（函数（）{
变量化身=[]，位置=0；
$.get（“/avatars”）。然后（函数（列表）{
化身=列表；
show_25（）；
});
函数show_25（）{
对于（var i=位置；Math.min（i，list.length）<25+位置；i++）{
$（“list.length）{
$（“#更多链接”）.hide（）；
}
}
$（“#更多链接”）。单击（显示25）；
});

听起来像是在寻找一种可以从基于php的源动态加载数据的东西，一次加载这么多数据。您可以很容易地从以下数据源加载图像：

$.getJSON("http://somewhere.com/feeds/feed.php?id=12345", function(data) {
    $.each(data.items, function(index, item) {
        $("<img/>")
            .attr("title", item.title)
            .attr("src", item.src)
            .wrap("<a href='" + item.link + "'></a>")
            .appendTo("#mybox")
    });
});

$.getJSON（“http://somewhere.com/feeds/feed.php?id=12345，函数（数据）{
$.each（数据项、函数项、索引项）{
$("
然后将列表与类似jCarousel的东西相结合，它可以从最后一项循环到第一项。事实上，jCarousel可能是最好的解决方案。从php驱动的json源加载并构建一个列表-查看从ajax加载旋转木马的演示


旋转木马可能不需要添加分页，但如果需要，此链接可能会对您有所帮助


祝你好运！
听起来你在寻找一种可以从基于php的源动态加载数据的东西，一次加载这么多数据。你可以很容易地从以下数据源加载图像：

$.getJSON("http://somewhere.com/feeds/feed.php?id=12345", function(data) {
    $.each(data.items, function(index, item) {
        $("<img/>")
            .attr("title", item.title)
            .attr("src", item.src)
            .wrap("<a href='" + item.link + "'></a>")
            .appendTo("#mybox")
    });
});

$.getJSON（“http://somewhere.com/feeds/feed.php?id=12345，函数（数据）{
$.each（数据项、函数项、索引项）{
$("
然后将列表与类似jCarousel的东西相结合，它可以从最后一项循环到第一项。事实上，jCarousel可能是最好的解决方案。从php驱动的json源加载并构建一个列表-查看从ajax加载旋转木马的演示


旋转木马可能不需要添加分页，但如果需要，此链接可能会对您有所帮助


祝你好运