1

如何在我的网页上设置旋转器/轮播的焦点

根据我的代码，两个旋转器同时滑动，但我只希望那个旋转器滑动，它是集中的。

我在 and 上添加了 tabindex 属性，"carousel_inner" div我还在 the 上添加了 tabindex 属性"#home_rotator" div，然后调用了焦点函数，但它们同时集中在我的网页中

我的代码是：

$("#carousel_inner").attr("tabindex",0).focus(function() {
    $(document).keydown(function(eventObject) {
        if(eventObject.which==37) {//left arrow
            $("#carousel_inner").focus();               
            $('#left_scroll').click();//emulates click on prev button 
        } else if(eventObject.which==39) {//right arrow
            $("#carousel_inner").focus();               
            $('#right_scroll').click();//emulates click on next button
        }   
    });
});

// 添加键盘导航

$("#home_rotator").attr("tabindex",-1).focus(function() { 
    $(document).keydown(function(eventObject) {
        if(eventObject.which==37) {//left arrow
            $("#home_rotator").focus();             
            base.goBack();//emulates click on prev button 
        } else if(eventObject.which==39) {//right arrow
            $("#home_rotator").focus();             
            base.goForward();   //emulates click on next button 
        }           
    });
});
4

1 回答 1

0

您在焦点函数中绑定事件。一旦一个事件被绑定，它就被绑定了。取消焦点元素不会解除先前事件的绑定，除非您通过.unbind()在事件中编写语句明确告诉它.blur()。

但是，最好在事件之外绑定.keydown()一次事件，focus()然后检查哪个元素具有焦点并执行所需的操作。

$(document).keydown(function(e) { 
    if ( document.activeElement.id === 'carousel_inner' ) {
        if ( e.which === 37 ) {
            // event for left key on carousel_inner
        }
        else if ( e.which === 39 ) {
            // event for right key on carousel_inner
        }
    }
    else if ( document.activeElement.id === 'home_rotator' ) {
        if ( e.which === 37 ) {
            // event for left key on home_rotator
        }
        else if ( e.which === 39 ) {
            // event for right key on home_rotator
        }
    }
});

jsfiddle：http: //jsfiddle.net/9ErRF/

于 2012-12-03T15:34:27.527 回答