仅使用JavaScript向幻灯片库添加导航控件

我有一个幻灯片库，当你点击一个缩略图时，它会检索缩略图中的图像引用并将其显示在主面板中

现在，我添加了导航控件，但我不知道如何将其全部连接起来，这样，如果单击“下一个/上一个”，它将在缩略图中导航并高亮显示您所在的缩略图

代码太长，无法粘贴到此处，但关键是：

---

ps：只使用JavaScript，不使用jQuery。

我将给你一个slider的例子，你可以根据它来解决问题（或者甚至修改）

示例（）是一个滑块，可左右移动

元素，但您可以看到如何绑定单击事件

---

希望有帮助。请随时提出后续问题。

我重新编写了您的代码并使其正常工作。我建议您对代码进行一点重构，以清理它。我会说创建一个包含图像url和标题的对象数组：

var objArray, obj;
for(var i = 0 ....) {
    obj = {
        url : "http://foobar.com/foo.png",
        caption : "Caption"
    };
    objArray.push(obj);
}
// then index with
var currObj = objArray[current];  // where 'current' is the variable you are using for state

---

基本上，我所做的是将一些代码从bindImage中移到一个名为“set”的函数中（您可能想重命名它）。我还注释掉了删除锚href的那一行。

Hi John指向JSFIDLE的链接似乎已断开。Oops。不知道那里发生了什么。现在已经修复。从顶部函数中注释掉“remove anchor href”会破坏缩略图单击功能。有什么办法可以避免吗？试试最新的链接。我做了一些类似于我提供的示例代码的事情。有没有办法在不改变顶部的getAndDropLink函数的情况下解决这个问题？该功能在站点的其他位置使用，因此建议不要更改它。