1

我不是 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>

4

1 回答 1

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');
    });
});
于 2013-04-02T13:10:12.700 回答