Question

我正在建立一个＆＃34;产品之旅＆＃34;。它被构建为全屏幻灯片，我有next和div-id箭头用于导航（以及箭头键）。但是现在我有一个时间表，我似乎无法跳到＆＃39;幻灯片使用section 5？

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

Here is my working example。幻灯片的时间轴显示在幻灯片2+上。例如，我只在binding部分工作。

对于jQuery，这是slider的所有代码并创建/* Product Tour */ $(document).ready(function() { var current = 0; function previousIndex() { var previous = current - 1; if(previous == -1) { previous = $(".tour-panel").size() -1; } return previous; } function nextIndex() { var next = current + 1; if(next == $(".tour-panel").size()) { next = 0; } return next; } function removeClasses() { $(".tour-panel").each(function(index) { if(index != current) { $(this).removeClass("active-tour"); } }) } function nextElement() { removeClasses(); $($(".tour-panel")[current]).addClass("fadeOutLeft"); current = nextIndex(); setTimeout(function() { $($(".tour-panel")[current]).addClass("active-tour fadeInRight"); }, 50); setTimeout(function() { $($(".tour-panel")[previousIndex()]).removeClass("active-tour fadeOutLeft"); }, 750); } function previousElement() { removeClasses(); $($(".tour-panel")[current]).addClass("fadeOutRight"); current = previousIndex(); setTimeout(function() { $($(".tour-panel")[current]).addClass("active-tour fadeInLeft"); }, 50); setTimeout(function() { $($(".tour-panel")[nextIndex()]).removeClass("active-tour fadeOutRight"); }, 750); } Mousetrap.bind('left', previousElement); Mousetrap.bind('right', nextElement); $(".previous").click(previousElement); $(".next").click(nextElement); });

addClass

我正在使用removeClass和a来切换活动页面（或您实际看到的页面）。

以下是我的时间轴的HTML，您可以看到我只是尝试使用<ul class="slideshow-timeline"> <li class="active-target-main"><a href="#target">Target</a> <ul class="current-section"> <li><a href="#target-1">Tracking</a></li> <li><a href="#target-2">Segmentation</a></li> <li><a href="#target-3">Wealth Screening</a></li> <li><a href="#target-4">Targeting</a></li> <li><a href="#target-5">Cultivation</a></li> </ul> </li> <li><a href="#connect">Connect</a></li> <li><a href="#convert">Convert</a></li> <li><a href="#optimize">Optimize</a></li> </ul>标记来交换幻灯片。

caret

在此先感谢，我感谢您的帮助和回复！

Answer 1

我没有办法检查此代码，但我相信以下代码应该可以使用，至少对于这5个部分而言。

获取目标的id，该链接的href属性。
```
target_id = $(this).attr('href');
```
删除当前面板上的active-tour课程
```
removeClasses();
```
在当前面板（active-tour）上添加target_id，为动画添加fadeInLeft
```
$(target_id).addClass("active-tour fadeInLeft");
```
删除＆＃34;之前＆＃34;上的退出动画类（fadeOutRight）面板
```
$($(".tour-panel")[current]).removeClass("fadeOutRight");
```

最后，设置current面板索引

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

所以，

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

Answer 2

这可以通过重构JS来完成。我们将添加一个也可用于箭头导航的功能。它可能看起来像这样：

首先，我们将创建一些变量（因为存储通常比创建jQuery对象更快）：

var current = 0,
    $panels = $('.tour-panel'),
    noOfPanels = $panels.size() - 1,
    $currentElement = $panels.eq(current),
    $nextElement = $currentElement,
    $links = $('.slideshow-timeline a');

在此示例中，$links和$panels包含相同数量的元素非常重要。现在我们可以编写改变$panels：

的函数

function anyElement( slidePosition ) {
    $nextElement = $panels.eq(next);
    if (slidePosition > current) {
        $currentElement.removeClass('active-tour');
        $currentElement.addClass('fadeOutLeft');
        setTimeout(function () {
            $nextElement.addClass('active-tour fadeInRight');
        }, 50);
        setTimeout(function () {
            $currentElement.removeClass('fadeOutLeft');
        }, 750);
    } else if (slidePosition < current) {
        $currentElement.removeClass('active-tour');
        $currentElement.addClass('fadeOutRight');
        setTimeout(function () {
            $nextElement.addClass('active-tour fadeInLeft');
        }, 50);
        setTimeout(function () {
            $currentElement.removeClass('fadeOutRight');
        }, 750);
    } else {
        // in this case the element selected and the one showing are the same
        // there are no class changes to be applied
    }
    current = slidePosition;
    $currentElement = $nextElement;
}

该函数采用参数slidePosition（代表新index的{{1}}的数字）并更改适当的类。

现在剩下要做的就是将功能绑定到用户交互。

如果我们匹配的panel之一是$links，我们会检查它clicked并将其用作新函数的参数。

index

我们以类似的方式处理箭头和$links.on('click', function () { e.preventDefault(); var next = $links.index(this); anyElement( next ); });。了解Mousetrap位置后，我们会计算出所需的位置（考虑current的最大数量。）

panels

我没有时间对此进行测试，但相信它应该可行。如上所述，$('.previous').click(function () { var previous; if (current === 0) { previous = noOfPanels; } else { previous = current - 1; } anyElement( previous ); }); Mousetrap.bind('left', function () { var previous; if (current === 0) { previous = noOfPanels; } else { previous = current - 1; } anyElement( previous ); }); $('.next').click(function () { var next; if (current === noOfPanels) { next = 0; } else { next = current + 1; } anyElement( next ); }); Mousetrap.bind('right', function () { var next; if (current === noOfPanels) { next = 0; } else { next = current + 1; } anyElement( next ); });和$links具有相同数量的元素且顺序相同非常重要。

（有一些开销。您可能想要删除一些全局变量，而是使用参数。）

在侧节点上：

$panels

返回一个jQuery对象，并且（据我所知）显着快于

$('.myClass').eq(5)

幻灯片：如何使用div ID跳转到不同的幻灯片？

2 个答案: