Question

这是我的javascript代码：

$(document).ready(function() {
    //variables
    var noOfSlides = 8;
    var slideWidth = 702;
    // Skip to a slide in sequence
    function goToSlide (number) {
        marginValue = ((-slideWidth * number) );
        $('#slide_inner_wrapper').stop().animate({'left': marginValue }, {duration: 1000});
    }
    $('#slide_inner_wrapper').width(noOfSlides * slideWidth) + 135; //Initial sizing of wrapper

    // Listeners
    $('.marker').bind('click', function() {
        number = parseInt($(this).attr('id').split('-').slice(1));
        $(this).parent().siblings().removeClass('current');
        $(this).parent().addClass('current');
        goToSlide(number);
    });
});

我创造了一个小提琴，所以你可以看到我的问题： http://jsfiddle.net/jXVR2/1/

您可能需要稍微调整窗口大小......但您可以看到我希望实现的目标！这是一个时间轴，可以在点击时激活到特定年份。

如果单击顶部的各个年份，相应的幻灯片应显示在视图的中心。这样可以正常工作，如果你加载它，然后从2005年一次点击一张幻灯片，但是一旦你跳过多张幻灯片，它会跳出位置？我认为这与保证金价值有关，但事实并非如此 - 计算结果正常。我花了好几个小时看着它，不能破解它...这可能与定位有关吗？我花了最后一小时摆弄这个没有解决方案:(

任何帮助非常感谢！我在这里的第一篇文章，所以请善待！谢谢:)）

Answer 1

我从jsfiddle获得的内容是由<a href="#2005">标签的主题标签引起的问题。

当您点击链接时，焦点会转到主题标签，因此动画会变得非常关键。

如果您不需要主题标签，则可以将其替换为<a href="#">。

如果您需要主题标签，请在点击功能结束时使用return false，即

$('.marker').bind('click', function() {
    number = parseInt($(this).attr('id').split('-').slice(1));
    $(this).parent().siblings().removeClass('current');
    $(this).parent().addClass('current');
    goToSlide(number);
    return false;
});

简单的jquery幻灯片 - 当单个幻灯片导航时，定位错误

1 个答案: