在 jQuery 滑块中实现“跳转到幻灯片”时遇到问题

Question

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

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

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

Here is my working example。滑块的时间线出现在幻灯片 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 个具体问题：

问题 1：我点击转到一张幻灯片，然后使用箭头键返回 ~ 这导致我跳回 2 张幻灯片。

---

问题 2：我单击转到幻灯片，然后使用箭头键前进 ~ 这打破了我的滑块并显示白屏

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

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

但我不是 100% 确定需要您的帮助，我准备了一个非常基本的小提琴示例 here。

---

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

非常感谢所有帮助！

特定文件的链接

Pastebin to full JS

Pastebin to full CSS

Answer 1

看看那个小提琴：

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

问题出在三个地方：

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

（它们是字符串，而不是整数）。

还有

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

（你从 1 开始计算链接）

希望它能按您的需要工作。

Answer 2

给你 -> fiddle

我基本上改变的是您在点击函数中定义的current 值。实际上，您的 id 值是一个字符串，因此触发 nextElement() 不会更改该值，而是将其连接起来。这会导致一些奇怪的行为，所以不要从目标0 更改为1，您只需从0 更改为01。

我还调整了您的 $('.slideshow-timeline a').click(function() { }，使其行为方式与您的 nextElement() 函数相同。

编辑：我忘了提

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

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

你说得对。如上所述，target_id.split('-')[1] 将返回一个字符串值，而不是一个数字，并且如上所述，这再次导致奇怪的行为，您的代码只是将返回的字符串与一个数字连接起来。为了达到你想要的目标，你必须使用 JavaScript 内置的 parseInt() 函数将 target_id.split('-')[1] 的值解析为 number 值。

结果如下：

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

Answer 3

你是对的......问题出在这一行：

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

试试这个：

current = (target_id.split('-')[1] - 1) || 0; // cater for zero-index

更新

• 经过进一步调查，我在您的fiddle（16 年 2 月 12 日）上发现了一些东西： '连接'、'转换'和'优化'的'li'在上面的'ul'之外-我猜他们应该在哪里。
• 上述 'li's 的 id 不符合您的命名约定（“target-1”、“target-2”等）。这肯定会导致这里采用的策略失败。
• fiddle 中的每个 'li' 都应该有匹配的 'div' 元素...，缺少上述 'li' 的元素。

解决了这个fiddle 的一些问题。

Answer 4

你好，请检查下面的链接..

这就是你要找的东西吗？

请参考此链接 [jsFiddle][1]

[1]: https://jsfiddle.net/gjyswrr9/39/

脚本代码如下，

$(document).ready(function() {

var current = 0;

function previousIndex() {
var previous = parseInt(current,10) - 1;
if(previous == 0) {
    previous = $(".tour-panel").size();
}
return previous;
}

function nextIndex() {
var next = parseInt(current,10) + 1;
if(next == $(".tour-panel").size()+1) {
next = 1;
}
return next;
}

function removeClasses() {
$(".tour-panel").each(function(index) {
if(index != current) {
  $(this).removeClass("active-tour fadeInRight fadeInLeft fadeOutRight fadeOutLeft");
}
})
}

function nextElement() {
removeClasses(); 
current = nextIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInRight");
 }, 50);
 }

function previousElement() {
removeClasses();
current = previousIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInLeft");  
}, 50);
setTimeout(function() {
$($(".tour-panel")[nextIndex()]).removeClass("active-tour fadeOutRight");
}, 750);
}


$('.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;
});


Mousetrap.bind('left', previousElement);
Mousetrap.bind('right', nextElement);

$(".previous").click(previousElement);
$(".next").click(nextElement);
});