Javascript jQuery通过数组单击，更改页面上的3项

我有一个对象数组，其中包含一个链接、一个图像标记和一个标题的值

var array = [
{ 'link': 'link0', 'src': 'page-0.jpg', 'title': 'Title 0' },
{ 'link': 'link1', 'src': 'page-1.jpg', 'title': 'Title 1' },
{ 'link': 'link2', 'src': 'page-2.jpg', 'title': 'Title 2' },
{ 'link': 'link3', 'src': 'page-3.jpg', 'title': 'Title 3' },
{ 'link': 'link4', 'src': 'page-4.jpg', 'title': 'Title 4' }
];

我的页面有三个图像，每个图像的标题如下：

[Title 4], [Title 0], [Title 1]

最后一个数组项将位于插槽1中，第一个数组项位于插槽2中，第二个数组项位于插槽3中

当用户单击左箭头或右箭头时，我需要在阵列中来回循环，更改页面上的三个插槽，如下所示：

[4], [0], [1] (Start view)
[0], [1], [2]
[1], [2], [3]
[2], [3], [4]
[3], [4], [0]
[4], [0], [1] (End view)

---

有人知道我怎么做吗？谢谢，

我们来分解一下需求吧

每次用户单击按钮时，都需要增加或减少引用数组的值。这些值需要存储在某个地方——如果愿意，可以使用三个变量（全局）。对于这个演示，我将它们分配给一个“state”对象：

下一部分是增加/减少我们的值的逻辑。我的代码没有什么特别之处，可能会被清理（或优化），但下面是我写的：

function click(dir) {
    var key;

    // Loop the state object to get appropriate values
    for (key in state) {

        // Based on direction, we need to update values that are 0 or 4 (first/last)
        // so not to break inner/outer bound
        if (dir === -1) {
            if (state[key] === 0) {
                state[key] = 4;
            } else {
                state[key] += dir;
            }
        } else {
            if (state[key] === 4) {
                state[key] = 0;
            } else {
                state[key] += dir;
            }
        }
    }

    // Return state object
    return state;
}

最后，我们需要将方向传递给递增/递减函数。为此，我绑定了两个事件处理程序并只传递1/-1

document.getElementById('previous').addEventListener('click', function(){
    var data = click(-1);
    updateValues(data);
});

document.getElementById('next').addEventListener('click', function(){
    var data = click(1);
    updateValues(data);
});

下面是一个演示小提琴：

---

希望这有帮助

你试过什么？你为什么把它标记为无限循环？你有什么问题吗？这个问题与jquery或其当前形式无关。我只是想不出在更新页面上的三个区域时点击循环的逻辑。我已经删除了jQuery标记。

document.getElementById('previous').addEventListener('click', function(){
    var data = click(-1);
    updateValues(data);
});

document.getElementById('next').addEventListener('click', function(){
    var data = click(1);
    updateValues(data);
});