几个引导转盘+键盘控制

Question

我正在写一个博客，上面有几个Twitter引导转盘。我使用以下代码来启用键盘控制：

<!-- Script: Carousel Keyboard controls -->
<script type="text/javascript">
  jQuery(document).bind('keyup', function(e) {
      if(e.which==39){
        jQuery('a.carousel-control.right').trigger('click');
      }   
      else if(e.which==37){
        jQuery('a.carousel-control.left').trigger('click');
      }
  });
</script>

这很有魅力。然而，由于一旦我开始使用键盘控件，就会有不同的转盘，所以所有转盘都会同时更改。

有办法解决这个问题吗？

这是我正在工作的网站：http://rubenparra.com/blog/

谢谢！

Answer 1

在触发时，同时单击所有左侧（或右侧）按钮，因此当然所有转盘都会同时更改。

如果您想一次更改特定的转盘，可以使用转盘ID来防止这种情况：

<script type="text/javascript">
jQuery(document).bind('keyup', function(e) {
    if (e.which==39) {
        jQuery('#carousel-4627 a.carousel-control.right').trigger('click');
    } else if (e.which==37) {
        jQuery('#carousel-4627 a.carousel-control.left').trigger('click');
    }
});
</script>

此外，Bootstrap旋转木马提供了更优雅的方法：

<script type="text/javascript">
jQuery(document).bind('keyup', function(e) {
    if (e.which==39) {
        jQuery('#carousel-4627').carousel('next');
    } else if (e.which==37) {
        jQuery('#carousel-4627').carousel('prev');
    }
});
</script>

希望这能有所帮助。

Answer 2

我最近解决了这个问题。

首先，您需要此脚本来查看当前可见的转盘。

$.fn.isOnScreen=函数（）{var win=$（窗口）；var视口={top:win.scrollTop（），left：win.scrollLeft（）}；viewport.right=viewport.left+win.width（）；viewport.bottom=viewport.top+win.height（）；var边界=this.offset（）；bounds.right=bounds.left+this.outerWidth（）；bounds.bottom=bounds.top+this.outerHeight（）；return（！（viewport.right bounds.right || viewport.bottom bounds.bottom））；}；

现在，你需要绑定密钥

$(document).bind('keyup', function (e) {
$('.carousel').each(function () {
    if ($(this).isOnScreen()) {
        if (e.keyCode == 39) {
            $(this).find('.carousel-control.right').trigger('click');
        }
        else if (e.keyCode == 37) {
            $(this).find('.carousel-control.left').trigger('click');
        }
        return false;
    }
});

})；

return=false仅使第一个可见转盘旋转。return=true将使所有可见的转盘旋转。