我一直在进行产品巡回演出,并且由于在此之前成员的帮助,我能够在现有巡回演出中加入“导航”。问题在于,有3种不同的导航方式。


屏幕上的侧箭头
方向键(向左和向右)
屏幕底部的滑块时间轴


我注意到,使用各种导航选项滚动浏览working project后,滑块将断裂。您可以尝试使用箭头键滑动,然后使用底部的导航键,只是一般情况下会破坏滑块。

似乎我的索引不合适,当我实现滑块时,一个用户建议使用它:
我也赶上了


  未捕获的参考错误:“ e”未定义


但是由于我没有编写代码,所以我不确定如何修复它。

$(document).ready(function() {

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

    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;
}

$('.previous').click(function () {
    if (current === 0) {
        previous = noOfPanels;
    } else {
        previous = current - 1;
    }
    anyElement( previous );
});
Mousetrap.bind('left', function () {
    if (current === 0) {
        previous = noOfPanels;
    } else {
        previous = current - 1;
    }
    anyElement( previous );
});

$('.next').click(function () {
    if (current === noOfPanels) {
        next = 0;
    } else {
        next = current + 1;
    }
    anyElement( next );
});
Mousetrap.bind('right', function () {
    if (current === noOfPanels) {
        next = 0;
    } else {
        next = current + 1;
    }
    anyElement( next );
});

    $links.on('click', function () {
    e.preventDefault();
    var next = $links.index(this);
    anyElement( next );
    });

});


似乎在导航滑块时难以在两者之间进行解密,我也使用此HTML构建了较低的导航。它的构建思路是链接到#id,然后使用我的滑块引用ID并将其拉到屏幕上。

<ul class="slideshow-timeline">
    <li class="active-target-main"><a href="#target" class="js-goto-panel">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>


我如何解决固定索引顺序的问题,就好像它坏了一样,它会完全破坏用户体验。非常感谢您的帮助!

最佳答案

您的脚本在执行后即会中断。这是不好的。
这里有问题的代码是这一行(围绕第164行):

$(".sticky").offset().top;


当它执行时,类sticky似乎没有任何元素。

还尝试更改以下代码(在第66行附近):

h.on("click", function() {
    e.preventDefault();
    var i = h.index(this);
    b(i)
})




h.on("click", function( e ) {
    e.preventDefault();
    var i = h.index(this);
    b(i)
})


您的脚本中似乎有几个问题,所以最好的方法是检查控制台并调试关键错误。

例如:您已将参数添加到上述函数中。现在您的脚本可以执行了,并且出现了以前未见的错误(因为该脚本现在才可以到达该位置)。

新的错误是未定义h。请详细说明您要完成的工作。您还可以创建一个JSFiddle吗? (如果这样做,编辑起来会更容易。)

10-05 21:02
查看更多