Question

我在模态窗口中使用了boostrap轮播。

代码如下：

<div id="modal-window-slideshow" data-backdrop="static" class="modal-huge hide fade">
  <div class="modal-header">
    <button type="button" data-dismiss="modal" class="close" aria-hidden="true">×</button>
    <h3>Slides</h3>
  </div>
  <div class="modal-huge-body">
    <div id="myCarousel" class="carousel slide">
      <!-- Carousel items -->
      <div id="div-carousel-items" class="carousel-inner">

      <!-- Carousel nav -->
      <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
      <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
    </div>
  </div>
</div>

当用户点击下一个和上一个按钮时，一切正常。但我也希望允许用户通过键盘上的左右箭头进行导航。我编写的代码可以实现，但我遇到了一个奇怪的问题：在这种情况下，转换动画不起作用。我可以启用吗？

我的剧本

$(document).keypress(function(event) {
  var LEFT_ARROW = 39; var RIGHT_ARROW = 37;

  if (typeof event !== 'undefined' && $('#modal-window-slideshow').is(':visible')) {
    if (event.keyCode === RIGHT_ARROW) {
      $(this).carousel('next');
    }

    if (event.keyCode === LEFT_ARROW) {
      $(this).carousel('prev');
    }
  }
  return true;
});

Answer 1

我想，我找到了解决方法。我只是寻找必要的链接，然后点击它。

$(document).keypress(function(event) {
    var LEFT_ARROW = 39; var RIGHT_ARROW = 37;

    if (event.keyCode === RIGHT_ARROW) {
      $('a.carousel-control.right').trigger('click');
    }

    if (event.keyCode === LEFT_ARROW) {
      $('a.carousel-control.left').trigger('click');
    }
   ...
});

Answer 2

 $(document).bind('keyup', function(e) {
    if(e.keyCode==39){
     //keycode for right arrow 
    }   
    else if(e.keyCode==37){
    // keycode for left arrow 
    }
});

Answer 3

我已经使用了这段代码，用于下一页和上一页，将它与名为next和previous的id组合在一起

$(document).keyup(function(e) {

            if (e.keyCode == 39) {  
                window.location.href = $("#next").attr('href');
            }
            if(e.keyCode==37){
                window.location.href = $("#previous").attr('href');
            }});

所以，如果你的html页面中有一个元素，或者带有这个id的php页面，那么该函数将专门用于该id。

示例：

<div class="buttons">
<a href="www.urlpage.tld/previous/" class="prev" id="previous" title="Previous Page"></a> <a href="www.urlpage.tld/next/" class="next" id="next" title="Next Page"></a>
</div>

我希望这对你有所帮助。

问候！

Bootstrap模态+轮播。下一张和上一张幻灯片不会通过Javascript进行转换

3 个答案: