在无限循环样式的展示中预装相邻条目

Question

我正在做一个投资组合，你首先会收到每个项目的缩略图。单击缩略图时，将加载并显示内容。

现在，对于这个内容加载，我决定跳过ajax，将所需的所有信息放入javascript变量中，这样在获取内容时，我只需使用jquery创建一个容器，然后将变量中提供的信息填充到其中，然后显示给访问者。到目前一切尚好。

我想要做的是，当访问者加载一个项目时，它应该同时与相邻的项目一起在屏幕外创建容器。例如，如果访问者单击项目编号3，它应该加载项目1和2(位于左侧的屏幕外)以及项目4和5(位于右侧的屏幕外)。当访问者完成任务时，他或她应该只需点击前一个或下一个，这个特定的项目就会在屏幕上滑动。

一段时间以来，我一直在研究如何构造出最有效率的结构，但我似乎想不出如何做到这一点。最让我烦恼的是，如果访问者直接进入项目1并决定单击以前的项目，那么如何为最后一个项目服务？

项目：

1 2 3 4 5 6 7 8 9 10

粗体表示单击的项目，斜体表示应该加载的项目。正如您所理解的，例如，如果在此场景中单击next，那么2将变为活动，而alas项目4将被加载/创建。

创建容器时，如下所示：

<div id="projects">
    <article class="curr" data-order="1" id="project1">      
        Content
    </article>
</div>

这个想法是用类.prev / .next来准备/追加新项目到#projects。

我从其中获取数据的变量如下所示：

var works = {
    "work":{
        "1":{"id":101,"name":"project-1","title":"Project 1","content":"Text"},
        "2":{"id":201,"name":"project-2","title":"Project 2","content":"Text"},
        "3":{"id":301,"name":"project-3","title":"Project 3","content":"Text"},
        "4":{"id":401,"name":"project-4","title":"Project 4","content":"Text"},
        "5":{"id":501,"name":"project-5","title":"Project 5","content":"Text"},
        "6":{"id":601,"name":"project-6","title":"Project 6","content":"Text"},
        "7":{"id":701,"name":"project-7","title":"Project 7","content":"Text"},
        "8":{"id":801,"name":"project-8","title":"Project 8","content":"Text"},
        "9":{"id":901,"name":"project-9","title":"Project 9","content":"Text"},
        "10":{"id":1001,"name":"project-10","title":"Project 10","content":"Text"},

    }
}

"1“、"2”等代表项目的显示顺序。此外，我在一个单独的变量中有项目总数。但除此之外，如何以一种最有效的方式来处理这个问题，是我现在无法想象的。

有什么想法？

Answer 1

如果您的问题是找出当用户打开项目project_idx时应该加载哪些项目，那么您可以尝试这样做

function next(idx) {
    return (idx + 1) % project_count;
}
function prev(idx) {
    return (idx + (project_count - 1)) % project_count;
}

function adjacent(project_idx) {
    return {
        "prev": [prev(prev(project_idx)), prev(project_idx)],
        "next": [next(project_idx), next(next(project_idx))]
    };
}

// assuming project_count = 10 and projects are indexed starting 0
adjacent(0); // -> {prev:[8,9], next:[1,2]}
adjacent(9); // -> {prev:[7,8], next:[0,1]}
adjacent(4); // -> {prev:[2,3], next:[5,6]}

Answer 2

如果使用一个标志来确保加载了项目，然后加载当前项目的prev和下一个项目，又如何呢？这样，在第一个项目中单击prev就没有问题了，因为最后一个项目将被加载。把这个应用到zaquest的答案中，我想你会没事的。