下一曲/上一張幻燈片使用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'); 
    }); 
});