下一曲/上一张幻灯片使用jQuery周期

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