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

Question

How can I set focus of a rotator / carousel on my web page

According to my code both the rotators get slided simultaneously but I want only that rotator to slide which is focussed .

I added the tabindex attribute on the "carousel_inner" div and as well as I also added the tabindex on the "#home_rotator" div and then called the focus function but they are focused simultaneously in my webpage

My code is:

$("#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
        }   
    });
});

// Add keyboard navigation

$("#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 
        }           
    });
});

Answer 1

You're binding events inside the focus function. Once an event is bound, it's bound. Unfocusing the element won't unbind the previous events, unless you explicitly tell it to by writing an .unbind() statement in a .blur() event.

But, you'd be better off binding the .keydown() event once , outside of the focus() event, then checking which element has focus and performing the required action.

$(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/