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

Having trouble implementing "jump to slide" in a jQuery slider

本文关键字：幻灯片 问题 遇到 jQuery 实现      更新时间：2023-09-26

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

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

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

这是我的工作示例。滑块的时间线显示在幻灯片 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%确定，需要你的帮助，我在这里准备了一个非常基本的小提琴示例。

<小时 />

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

非常感谢所有的帮助！

指向某些文件的链接

粘贴到完整的 JS

Pastebin to full CSS

看看那个小提琴：

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 开始的链接）

希望它能满足您的需求。

你去 ->小提琴

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

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

编辑：我忘了提

我相信大部分探针都位于以下代码行中：

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

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

结果如下：

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

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

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

试试这个：

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

更新

  • 在进一步调查中，我在您的小提琴上发现了一些东西（12-Feb-16）："连接"、"转换"和"优化"的"li"在上面的"ul"之外 - 我猜这就是它们应该在的地方。
  • 上面提到的"li"的 id 不遵循您的命名约定（"target-1"、"target-2"等）。这肯定会导致这里采用的策略失败。
  • 每个"li"都应该有匹配的"div"元素......在你的小提琴中，缺少上述"李"的元素。

清除了这个小提琴的一些问题。

嗨，

你能检查下面的链接吗？

这是你要找的吗？

请参考此链接 [js小提琴][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);
});
相关文章：