javascript - 在 jQuery slider 中实现 "jump to slide"时遇到问题

Question

过去 2 天我一直在尝试这个，但似乎无法找到解决方案..

我有用于导航的上一个和下一个箭头(以及箭头键)。但既然我有了时间线，我似乎无法使用 div-id(正确地)“跳转到”幻灯片？

因此，例如，如果我想从第 1 节转到第 5 节，我希望能够单击第 5 节按钮并跳转到该幻灯片。

Here is my working example 。 slider 的时间轴出现在幻灯片 2+ 上。例如，我只在目标部分内工作。

这是我用来“跳转到幻灯片”的代码:

$('.slideshow-timeline a').click(function() {
    var target_id = $(this).attr('href');
    removeClasses();
    $($(".tour-panel")[current]).addClass("fadeOutRight");
    setTimeout(function() {
        $(target_id).addClass("active-tour fadeInLeft");
    }, 50);
    setTimeout(function() {
        $($(".tour-panel")[current]).removeClass("fadeOutRight");
    }, 750);
    current = target_id.split('-')[1] || 0;
});

但出于某种原因，我遇到了 2 个具体问题:

Problem 1: I click to go to a slide, then use arrow keys to go back ~ this causes me to jump back 2 slides.

---

Problem 2: I click to go to a slide, then use arrow keys to go forward ~ this breaks my slider and shows a white screen

我相信大部分问题都在这行代码中:

current = target_id.split('-')[1] || 0;

但我不是 100% 确定并需要你的帮助，我已经准备了一个非常基本的 fiddle 示例 here .

---

我尝试过的一些事情是弄乱 split() 变量，换掉 nextElement(); 和 previousElement();而且我就是找不到有效的解决方案。

非常感谢所有帮助!

特定文件的链接

Pastebin to full JS

Pastebin to full CSS

Answer 1

看看那个 fiddle :

https://jsfiddle.net/gjyswrr9/19/

问题出在 3 个地方:

var previous = parseInt(current, 10) - 1;
var next = parseInt(current) + 1;

(它们是字符串，不是整数)。

和

current = target_id.split('-')[1] - 1 || 0;

(您计算从 1 开始的链接)

希望它能如您所愿。