Question

我不是jQuery的天才，并想知道是否有人可以给我一个指针，指出我正在使用的代码有什么问题。滑块有效但我需要通过按左右键来转到下一张和上一张幻灯片。

这很可能是我忽略的一个明显的错误。目前，按键时没有任何反应。

的jQuery

        <script>
        $(function() {
            $('.slideshow').cycle({
                fx:'scrollHorz',
                easing:'easeInOutCirc',
                speed:700,
                timeout:5000,
                pager:'.slideshow_wrapper .slideshow-paging'
            });
            $('.slideshow_wrapper').mouseenter(function(){
                $('.slideshow').cycle('pause');
            }).mouseleave(function(){
                $('.slideshow').cycle('resume');
            }).keyup(function(e) {
            if(e.keycode == 37)
                $('.slideshow').cycle('prev');
            if(e.keycode == 39)
                $('.slideshow').cycle('next');
            })
        });
    </script>

HTML

<section id="gallery" class="slideshow_wrapper">
<div class="slideshow-paging"></div>
<div class="slideshow">
    <article class="slideshow_item">
        <div class='image'>
            <a href='#'>
                <img src='[URL HERE]' />
            </a>
        </div>
    </article>
</div>

Answer 1

您已将keyup事件处理程序附加到幻灯片显示包装器，因此需要关注要触发的处理程序。将其附加到文档中。另外，使用which代替键码...

$(function() {
    $('.slideshow').cycle({
        fx:'scrollHorz',
        easing:'easeInOutCirc',
        speed:700,
        timeout:5000,
        pager:'.slideshow_wrapper .slideshow-paging'
    });
    $('.slideshow_wrapper').mouseenter(function(){
        $('.slideshow').cycle('pause');
    }).mouseleave(function(){
        $('.slideshow').cycle('resume');
    })
    $(document).keyup(function(e) {
        if(e.which == 37)
            $('.slideshow').cycle('prev');
        if(e.which == 39)
            $('.slideshow').cycle('next');
    });
});

此外，根据您使用的jQuery版本，您最好使用on分配事件处理程序...

$(function() {
    $('.slideshow').cycle({
        fx:'scrollHorz',
        easing:'easeInOutCirc',
        speed:700,
        timeout:5000,
        pager:'.slideshow_wrapper .slideshow-paging'
    });
    $('.slideshow_wrapper').on("mouseenter", function(){
        $('.slideshow').cycle('pause');
    }).on("mouseleave", function(){
        $('.slideshow').cycle('resume');
    })
    $(document).on("keyup", function(e) {
        if(e.which == 37)
            $('.slideshow').cycle('prev');
        if(e.which == 39)
            $('.slideshow').cycle('next');
    });
});

下一个/上一个幻灯片按钮单击jQuery Cycle

1 个答案: