3

这是我的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 一次单击一张幻灯片，这工作正常，但是一旦您跳过多张幻灯片，它就会跳出位置？我认为这与保证金值有关，但事实并非如此——计算很好。我花了几个小时看着它，无法破解它......这可能与定位有关吗？我花了最后一个小时摆弄这个没有解决方案:(

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

4

1 回答 1

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;
});
于 2012-11-21T18:48:06.660 回答