javascript - 使用 Jquery 或 Javascript 循环浏览一堆小头像的最佳方法

Question

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

我不确定执行此操作的最佳方法，我应该加载所有 200 张图像，但将最后 175 张设置为不可见，然后通过 Javascript 和 JQuery 执行此操作，这有意义吗？

我知道我问了一个令人困惑的问题。我基本上只是想一次显示 25 个而不是 200 个，并且我不确定具体的 JQuery 或 Javascript 方法来做到这一点。

Answer 1

听起来您正在寻找能够从基于 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")
    });
});

然后将列表与 jCarousel - http://sorgalla.com/jcarousel/ 之类的内容组合起来- 能够从最后一个项目循环回到第一个项目。事实上，jCarousel 可能是您最好的解决方案。从 php 驱动的 json 源加载并构建列表 - 查看从 ajax 加载轮播的演示

http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html

轮播可能不需要添加分页，但如果需要，此链接可能对您有帮助。

http://www.myphpetc.com/2009/10/easy-pagination-with-jquery-and-ajax.html

祝你好运!