Javascript 在实施过程中遇到困难”；跳转到幻灯片“；在jQuery滑块中

在过去的两天里，我一直在尝试这个方法，但似乎找不到解决方案

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

例如，如果我想从第1节转到第5节，我想点击我的第5节按钮，它就会跳到那张幻灯片上

。滑块的时间线显示在幻灯片2+上。例如，我只在目标部分工作

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

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

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

---

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

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

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

current=target_id.split（'-'）[1]| 0

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


我尝试过的一些方法是弄乱
split（）
变量，调出
nextElement（）和
previousElement（）我就是找不到一个有效的解决方案

非常感谢您的帮助

指向某些文件的链接

看看那把小提琴：


问题有三个方面：

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

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

及

（从1开始计算链接）

希望它能满足您的需要。
给您->

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

此外，我还调整了您的
$（'.slideshow timeline a'）。单击（function（）{}
以与
nextElement（）函数的行为相同

编辑：我忘了提

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

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

这一点您是对的。如上所述，
target_id.split（'-'）[1]
将返回一个字符串值，而不是一个数字，并且如上所述，这再次导致了一种奇怪的行为，即您的代码只是将返回的字符串与一个数字连接起来。要实现您想要的目标，您必须解析
target_id.split（'-'）[1]通过使用内置的JavaScripts
parseInt（）
函数，将
的值转换为
数值

结果如下：

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

您好，请查看下面的链接

这就是你要找的吗

请参考此链接
[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);
});

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

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

试试这个：

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

更新


在进一步调查中，我在您的（2016年2月12日）上发现了一些事情：
“连接”、“转换”和“优化”的“li”不在上面的“ul”范围内，我猜它们应该在这里
上面提到的'li'的ID不符合您的命名约定（“target-1”、“target-2”等）。这肯定会导致此处使用的策略失败
每个“li”都应该有匹配的“div”元素……在您的中，前面提到的“li”的元素缺失

解决了一些问题。
你能让JS摆弄一下这个bug吗？@Blag有一个具有基本功能的。我还可以包括一个指向我完整JS的pastebin链接。
=>跟踪在
#target-2
下，其他人也一样，每个链接都不好……这与摆弄或工作示例有关吗？由于工作示例是在一个框架上，很难在小提琴中重新创建它。我将尝试制作一个更清晰的小提琴。因此，我只想澄清一下，您的滑块在鼠标单击时工作得非常好，但当您使用箭头键进行导航时，它就搞乱了？因为工作示例和JSFIDLE在我单击随机幻灯片按钮-我可以跳转到那些幻灯片。现在
var-previousIndex（）
和
var-next
您是在谈论替换
previousIndex（）和
nextIndex（）中的
var
functions？EDIT：刚刚更新了工作示例，但似乎仍然具有相同的功能problems@ether关于你的问题-是的，它们来自previousIndex和nextIndex函数。你签出fiddle了吗？它有效吗？我注意到，更新了我的live示例，现在我可以通过底部链接进行导航。但是如果我使用
或箭头键进一步导航时，它仍然会跳转或断开滑块。@我在您的实例中看到它被缩小了。这可能是问题所在吗？也许您应该删除旧文件并确保系统使用新文件？或者关闭缩小以进行调试？不幸的是，由于框架的原因，它会自动在工作模型中实现您的想法后，我们仍然有一些问题。单击时间线中的链接将带您到链接1（即：如果我单击自定义列表，它将带我到分段）。此外，单击类似“优化”的部分标题将我返回到教程主页。您是否更改了函数中的当前顺序？您是否还将字符串解析为int，如我的编辑中所述？与更改当前顺序一样，您的意思是将其添加到
（'.slideshow timeline a'）
的
函数中吗？请看一下。实际上，您只需更改
current = (target_id.split('-')[1] - 1) || 0; // cater for zero-index