javascript - jQuery 在演示期间使用箭头键滚动

Question

我正在使用 HTML 为我正在处理的项目创建演示文稿。演示文稿将是整页幻灯片，我想用 jQuery 实现一个脚本，以便在按下箭头键时，它可以在幻灯片之间平滑滚动。显然，左边是上一张幻灯片，右边是下一张幻灯片。

我写了一个脚本，但它只在第一次运行。我是 jQuery 的新手，我似乎无法修复它。

<script type="text/javascript">
$(document).keydown(function(e){
if (e.keyCode == 37) { 
   $('.slide').prev().ScrollTo({
        duration: 2000,
        easing: 'linear'
    });
}
if (e.keyCode == 39) { 
   $('.slide').next().ScrollTo({
        duration: 2000,
        easing: 'linear'
    });
    }
});
</script>

Answer 1

看这个例子:http://jsfiddle.net/kevalbhatt18/0tue685a/

$(document).keydown(function (e) {
    // console.log($('[class ^=slide]'))

    if (e.keyCode == 37) {
        if ($('#container').find('.scroll').prev()[0]) {
            $("html, body").animate({
                scrollTop: $($('#container').find('.scroll').prev()[0]).offset().top
            }, 1000);
            console.log($($('#container').find('.scroll').prev()[0]).addClass('scroll'))
            console.log($($('#container').find('.scroll')[1]).removeClass('scroll'))
        } else {
            $("html, body").animate({
                scrollTop: $($('#container').children()[$('#container').children().length - 1]).offset().top
            }, 1000);
            $($('#container').children()[$('#container').children().length - 1]).addClass('scroll')
            $($('#container').find('.scroll')[0]).removeClass('scroll')


        }



    }
    if (e.keyCode == 39) {
        if ($('#container').find('.scroll').next()[0]) {
            $("html, body").animate({
                scrollTop: $($('#container').find('.scroll').next()[0]).offset().top
            }, 1000);
            $($('#container').find('.scroll').next()[0]).addClass('scroll')
            $($('#container').find('.scroll')[0]).removeClass('scroll')
        } else {
            $("html, body").animate({
                scrollTop: $($('#container').children()[0]).offset().top
            }, 1000);

            $($('#container').children()[0]).addClass('scroll')
            console.log($($('#container').children()[0]))
            $($('#container').find('.scroll')[1]).removeClass('scroll')
        }
    }
});