Question

我使用jQuery jCarousel script的0.3版本在the webpage I'm working on上显示三个轮播。这三个旋转木马工作得很好。

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

如果您在页面中进行选项卡，焦点将转到旋转木马中第一个项目的第一个链接，即使此项目不可见！（例如：单击其中一个轮播中的＆＃34; next＆＃34;链接，然后使用Tab键进行浏览：焦点将转到轮播内部不可见的链接。）
如果您继续使用＆＃34;标签＆＃34;键，焦点将连续转到旋转木马中所有项目的所有链接。

而不是：焦点应该转到第一个可见项的第一个链接;然后，如果到达最后一个可见项目的最后一个链接，那么焦点应该从转盘（实际上是它之外的下一个链接）。

解决方案可能是使用tabindex ...但页面的某些部分与网站的其他页面共享，因此我无法在所有页面的所有链接中使用tabindex ... < / p>
而不是那样，我尝试过这样的事情：

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

然后它会阻止任何进一步使用＆＃34;标签＆＃34;键...

我希望这很清楚...... Thanx可以提供任何帮助！

Answer 1

我认为您需要结合已经提供的答案。您似乎应该能够使用Javascript在HTML上动态设置tabindex属性，这些属性需要是可列表的（heh，new word）。我在考虑这样的事情：

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

如果您在jsFiddle中进行了简化示例，那么帮助您会更容易。

Answer 2

在轮播createEnd和scrollEnd函数上，您可以重置.jCarousel的内容，以便只有可见的轮播项是“tabbable”。我在我的代码中完成了以下操作：

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

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

带键盘的jCarousel：使用tab键错误对焦

2 个答案: