0

我正在使用jQuery jCarousel 脚本的 0.3 版本在我正在处理的网页上显示三个轮播。这三个旋转木马工作得很好。

问题是：您无法使用键盘正确使用它们。

  1. 如果您浏览页面，焦点会转到轮播中第一个项目的第一个链接，即使该项目不可见！（例如：单击其中一个轮播中的“下一个”链接，然后使用 Tab 键浏览：焦点将转到轮播内部不可见的链接）。
  2. 如果你一直使用“tab”键，焦点将依次转到轮播中所有项目的所有链接。

取而代之的是：焦点应该转到第一个可见项目的第一个链接；然后，如果到达最后一个可见项目的最后一个链接，那么焦点应该离开轮播（实际上是它之外的下一个链接）。

一个解决方案可能是使用tabindex ...但是页面的某些部分与网站的其他页面共享，所以我不能在我所有页面的所有链接中使用tabindex ...

取而代之的是，我尝试过这样的事情：

$("#carousel-editos li a").focusin(function () { 
  $("#carousel-editos li.jcarousel-item-first .post-title a").focus(); 
  return false; 
});

但随后它阻止了“tab”键的任何进一步使用......

我希望这很清楚......感谢您的帮助！

4

2 回答 2

0

在 carousel createEnd 和 scrollEnd 函数中，您可以重置 .jCarousel 的内容，以便只有可见的 carousel 项目是“可选项卡”的。我在我的代码中这样做了，如下所示：

var bannerSlider_scrollEnd = function(event, carousel) {
    var $carousel = carousel.element(),
        $items = carousel.items(),
        $bannerContent,
        $visibleItemsContent = carousel.visible().find('.bannerContent');
    $items.each(function (index) {
        $bannerContent = $(this).find('.bannerContent');
        disableTabbing($bannerContent);
    });
    reenableTabbing($visibleItemsContent);
    $visibleItemsContent.find(':focusable').eq(0).focus();
 };

disableTabbing($container)和行指的reenableTabbing($container)是我在我的站点中编码的辅助函数，它基本上可以找到:focusable给定容器中的所有元素，并将 tabindex 设置为“-1”，然后分别设置为“0”。

在此过程之后，用户将只能通过可见的轮播项目而不是所有轮播项目进行选项卡。

于 2013-03-21T15:00:45.420 回答
0

我认为您需要结合您已经提供的答案。似乎您应该能够使用 Javascript 在 HTML 上动态设置您需要可选项卡的 tabindex 属性（呵呵，新词）。我在想这样的事情：

  1. 在页面加载时，找到轮播中的所有可见项目。使用 jQuery 为tabindex选项卡循环中所需的每个项目设置属性。
  2. 将tabindex属性分配给您要循环浏览的页面上的所有其他链接。
  3. 添加一些 jQuery 以tabindex在用户更改轮播中的项目时修改属性（单击下一个/上一个按钮）。

如果您在jsFiddle中制作了一个简化的示例，那么帮助您会容易得多。

于 2012-05-22T17:01:33.410 回答