Question

我正在创建幻灯片，我有一个包含数据信息的多维数组。数组看起来像这样，当然它会更长，在imageList中最多有20个数组。

var imagesList = [
   [1, 112, "<img src=\"http://example.com/test/images/1/112.jpg\" />", "http://example.com/test/photos/image-112", "Title 1"],
   [2, 115, "<img src=\"http://example.com/test/images/1/115.jpg\"/>", "http://example.com/test/photos/image-115", "Title 2"],
   [3, 116, "<img src=\"http://example.com/test/images/2/116.jpg\"/>", "http://example.com/test/photos/image-116", "Title 3"]
];

当幻灯片显示打开时，我将第一个数组设置为当前图像：

var curentImage = imagesList[0];

我附加了像这样的图像信息：

imageArea.append(curentImage[2]);
title.text(curentImage[4]);

左右有导航箭头。

rightNav.click( function(){
   //What goes here?
});

如何循环使用imagesList数组并为下一张图像追加信息？

时的上一张图片

leftNav.click( function(){
   //What goes here?
});

Answer 1

你只需要跟踪一个计数器。脚本的全局变量，您可以根据左/右键单击增加或减少。

var index = 0;

//slideshow open
var currentImage = currentList[index];

//right
counter ? counter > currentList.length - 1 : 0 : counter+=1;
//display image

//left
counter ? counter < 0 ? currentList.length - 1 : 0;
//display image

我会有一个通用函数，可以使用计数器从列表中获取正确的图像，并执行所有显示逻辑，因此可以从任何地方（打开，左，右）调用它

jQuery - 循环遍历多维数组并从next或prev数组追加数据

1 个答案: