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

Best way to cycle through a bunch of small avatars using maybe Jquery or Javascript

本文关键字：一堆 化身 方式 最佳 Jquery Javascript 循环 浏览 使用      更新时间：2023-09-26

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

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

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

听起来你正在寻找一种从基于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

祝你好运！

我会选择http://masonry.desandro.com/它有无限滚动的方法，看起来很酷。

假设您的more链接有一个id："more link"，您的图像容器有一个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);
});
相关文章：