带有缩略图的图像滑块单击帮助

Question

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

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

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

http://jsfiddle.net/aQTZ9/14/

谢谢！

编辑：我必须设置一个数组还是什么？我不确定单击链接时它如何知道下一张或上一张图片

Answer 1

在您的 .image 点击处理程序中，您可以这样做：

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

这会将所有图像的src属性设置为rel。所以没有什么卡住，它看起来就是这样，因为在您单击其中一个缩略图后，图库中的所有图像都将是相同的。

相反，您需要使用rel 属性在图库中找到正确的图像，然后调用rightImage 或leftImage 足够的时间使其显示在视图中。或者，您可以添加第三个函数，该函数与多个 rightImage 或 leftImage 调用执行相同的操作，而无需中间步骤。

这里有一些提示。

1. 摆脱$('.thumbnail-photos').mouseover 的东西，每次鼠标移到缩略图上时，它都会绑定一组新的点击处理程序。将其中的点击处理程序绑定移到外部，然后再将其删除。

2. 为幻灯片添加id 属性<li> 元素，使它们更容易找到。

3. 将rel 属性替换为data-slide 属性，值应与上面的id 属性匹配。这样可以轻松地将缩略图直接链接到其幻灯片。

4. 现在缩略图上的点击处理程序可以使用var $li = $('#' + $(this).data('slide'))（或旧版jQuery 中的var $li = $('#' + $(this).attr('data-slide'))）获取幻灯片。

5. 既然您拥有正确的$li，您应该能够确定需要为$('#slides ul') 的left 值设置动画的方向和距离。