Question

我有一个滑块，当您单击下一个和上一个时，图像向左或向右滑动。但是我在整理缩略图时遇到问题，如果我想点击缩略图，图像会显示，然后你可以点击下一个和上一个。

现在我可以点击我的缩略图，它会显示但是当我点击下一个或上一个时，它会卡在同一个图像上

如果有人可以帮助我，我已经设置了一个jsfiddle？首先你可以看到下一个和上一个将切换图像，但是一旦你点击缩略图并尝试下一个和上一个，它将不会改变图像

谢谢！

编辑：我必须设置一个数组或什么？我不确定在点击链接

时它将如何知道下一个或上一个图像

Answer 1

在.image点击处理程序中，您可以执行以下操作：

$('#slides img').attr('src', rel);

这会将所有图像的src属性设置为rel。所以没有任何东西被卡住了，它只是看起来那样，因为在点击其中一个缩略图后，图库中的所有图像都是相同的。

相反，您需要使用rel属性在图库中查找正确的图像，然后再次调用rightImage或leftImage以使其进入视图。或者，您可以添加第三个函数，该函数与多个rightImage或leftImage调用完成相同的操作，而无需中间步骤。

以下是一些提示。

摆脱$('.thumbnail-photos').mouseover的东西，每当鼠标移动到缩略图上时，最终会绑定一组新的点击处理程序。在删除它之前，将处理器内部的单击处理程序绑定移动到外部。
为幻灯片id元素添加<li>属性，以便于查找。
将rel属性替换为data-slide属性，这些值应与上面的id属性匹配。这样可以很容易地将缩略图直接链接到幻灯片。
现在，缩略图上的点击处理程序可以使用var $li = $('#' + $(this).data('slide'))（或旧版jQuery中的var $li = $('#' + $(this).attr('data-slide'))）获取幻灯片。
既然您拥有正确的$li，那么您应该能够确定left $('#slides ul') {{1}}值的动画显示方向和距离。