Question

有一个博客我正在研究几个Twitter Bootstrap轮播。我使用以下代码来启用键盘控件：

<!-- 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 = function(){

    var win = $(window);

    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = 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将导致所有可见的轮播旋转。

几个bootstrap轮播+键盘控制

2 个答案: