0

有一个博客我正在使用几个 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/

谢谢！

4

2 回答 2

3

目前您正在触发同时单击所有左（或右）按钮，因此所有轮播当然会同时更改。

如果您想一次更改特定的轮播，您可以使用轮播 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 carousel 还提供了更优雅的方法：

<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>

希望这可以帮助。

于 2013-07-16T17:29:32.520 回答
0

我最近解决了这个问题。

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

$.fn.isOnScreen = 函数（）{

    var win = $(窗口);

    var 视口 = {
        顶部：win.scrollTop()，
        左：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将导致所有可见的轮播旋转。

于 2013-08-12T00:41:10.927 回答