我一直在进行产品巡回演出,并且由于在此之前成员的帮助,我能够在现有巡回演出中加入“导航”。问题在于,有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吗? (如果这样做,编辑起来会更容易。)