Roundabout jQuery 插件 keypress 方向键左右移动答案

【问题标题】：Roundabout jQuery plugin keypress arrow keys move left rightRoundabout jQuery 插件 keypress 方向键左右移动
【发布时间】：2012-10-19 15:50:29
【问题描述】：

我正在使用 Roundabout 插件 (http://fredhq.com/projects/roundabout)，但不知道如何使用预设的可调用方法，例如使用左/右箭头键在按键上动画到下一个/上一个。

我可以在不使用这些预设的情况下让按键正常工作，但我真的想在各种按键上使用预设类。有什么想法吗？

HTML

    <div id="carousel-container">
    <ul class="roundabout-holder">
       <li class="roundabout-moveable-item roundabout-in-focus"></li>
       <li class="roundabout-moveable-item"></li>
       <li class="roundabout-moveable-item"></li>
       <li class="roundabout-moveable-item"></li>
       <li class="roundabout-moveable-item"></li>
    </ul>
    </div>

jQuery 设置

    <script> // Calling the Roundabout plugin
       $(document).ready(function() {
          $('ul').roundabout();
       });
    </script>

    $(document.documentElement).keyup(function (event) {
      var direction = null;
      // handle cursor keys
      if (event.keyCode == 37) {
        // go left
        $('#roundabout-container').roundabout("animateToNextChild");
      } else if (event.keyCode == 39) {
        // go right
        $('#roundabout-container').roundabout("animateToPreviousChild");
      }
     if (direction != null) {
        $('ul.roundabout-holder li.roundabout-moveable-item').parent()[direction]().find('a').click();
      }
    });

【问题讨论】：

标签： jquery-plugins keypress

【解决方案1】：

这对我有用

HTML

   <ul class="pasador">
      <li><img src="fichas/01.jpg" alt="Award" /></li>
      <li><img src="fichas/02.jpg" alt="Backpack" /></li>
      etc ...
   </ul>

JQUERY 设置

<script>
    $(document).ready(function() {
        $('ul.pasador').roundabout();
    });
</script>

$(document.documentElement).keyup(function(event) {
    if (event.keyCode == 37) {
        $('ul.pasador').roundabout("animateToPreviousChild");
    } else if (event.keyCode == 39) {
        $('ul.pasador').roundabout("animateToNextChild");
    }
});

【讨论】：