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

Adding navigation controls to a slide gallery using JavaScript only

本文关键字：添加 导航 控件 幻灯片 JavaScript      更新时间：2023-09-26

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

现在我已经添加了导航控件，但我不确定如何将其连接在一起，以便如果您单击下一步/上一步，它将通过缩略图导航并突出显示您所在的那个

代码太长，不能粘贴在这里，但这里是关键:

http://jsfiddle.net/calebo/QuXYV/

我重新编写了您的代码并使其在这里工作。我建议稍微重构一下你的代码来清理它。我会说创建一个对象数组保存图像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的那行

我将给你一个滑动条的例子，你可以基于你的解决方案(甚至可能改变)。

示例(JSFiddle)是一个滑动条，它将<div>元素左右移动，但是您可以看到click事件的绑定是如何完成的。

希望有帮助。请随时提问。

相关文章：