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

的

Answer 2

我认为问题是$('.slide')没有选择您所在的幻灯片，它会选择与选择器匹配的所有幻灯片。你可以试试像

这样的东西

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