다음/이전 Slide on Button 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> 

그가에 대한 초점을해야합니다, 그래서 당신은 슬라이드 쇼 래퍼로 KeyUp 이벤트 핸들러를 첨부했습니다

<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

HTML 해고 할 처리기. 대신 문서에 첨부하십시오. 또한, ... 대신 키 코드의 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'); 
    }); 
});