jQuery는 Firefox에서 잘 보이지만 IE (Internet Explorer)에서는 작동하지 않습니다.

jQuery 1.7.1 및 jQuery UI 1.8.11과 jCarousel 0.2.8이 Firefox에서 완벽하게 작동합니다. 그러나 Internet Explorer 7, 8, 9 및 10에서 회전식 슬라이드 쇼가 제대로 작동하지 않습니다. 두 브라우저에서 제대로로드되도록하려면 어떻게해야합니까? FF와 IE에서 보이는 모습의 스크린 샷이 첨부됩니다. 아래는 내 JavaScript/jQuery 코드입니다. Drupal 사이트이므로 $() 대신 jQuery()가 사용됩니다.jQuery는 Firefox에서 잘 보이지만 IE (Internet Explorer)에서는 작동하지 않습니다.

당신은 내 웹 사이트에서 설명하는 문제를 테스트 할 수 있습니다

어떤 도움이 아주 많이 주시면 감사하겠습니다 IE에 고정하기 [데모 링크 제거]! 감사!!

function select_avatar(image, button) { 
image.input.prop('checked', true); 

jQuery('#layer_'+image.id).css({ backgroundImage: "url("+image.url+")" }); 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if(jQuery(this).attr("src") == src) 
     jQuery(this).addClass("avatar_select"); 
     else 
     jQuery(this).removeClass("avatar_select"); 
    } 
); 
} 

function unselect_avatar(image, button) { 

image.input.prop('checked', false); 

//select empty 
jQuery('#default_input_'+image.id).prop('checked', true); 

jQuery('#layer_'+image.id).css({ backgroundImage: "none" }); 

var src = button.attr("src"); 

button.parent().parent().find("li img").each(
    function(index) { 
     if(jQuery(this).attr("src") == src) 
     jQuery(this).removeClass("avatar_select"); 
    } 
); 
} 

function mycarousel_itemVisibleInCallback(carousel, item, i, state, evt) { 
// carousel.data is empty on page load 
var data = carousel.data; 

// True on page load 
if(!data) { 
    // cid is name of carousel, user_avatar_select_X 
    var cid = carousel.list.attr('id').substring(9); 
    var data = new Array(); 

    // For each img element in ID user_avatar_select_X 
    jQuery('#'+cid+' img').each(
     // Provide index # for each iteration of loop 
     function(index) { 
      // Sets input to the input element nearby the img element 
      // Note: Parent element is a label element 
      var input = jQuery(this).parent().siblings('input'); 
      // Sets url to the src of the img element 
      var url = jQuery(this).attr('src'); 

      // If the img is selected, apply the img to ID layer_user_avatar_select_X 
      // (which is on the picture) 
      if(input.is(':checked')) { 
        jQuery('#layer_'+cid).css({ backgroundImage: "url("+url+")" });     
      } 

      // Adds variables to the data array 
      data.push({id: cid, input: input, image: jQuery(this), url: url}); 
     }); 

    // Stores data array in carousel 
    carousel.data = data; 

    // Adds html to ID user-edit 
    // Adds input with ID default_input_user_avatar_select_X 
    // and name select_avatar_X 
    jQuery('#user-edit').append('<div class="form-item" style="display:none"><label class="option"><input class="form-radio user_avatar_select" id="default_input_'+cid+'" type="radio" value="none" name="select_avatar_'+cid.substring(cid.lastIndexOf("_") + 1)+'"/></label></div>'); 
} 

var idx = carousel.index(i, data.length); 
var image = data[idx - 1]; 

var img = image.image.clone(); 

if(image.input.is(':checked')) 
    img.addClass("avatar_select"); 

carousel.add(i, img); 

img.hover(
    function(){jQuery(this).addClass("avatar_hover");}, 
    function(){jQuery(this).removeClass("avatar_hover");} 
); 

img.click(
    function() { 
     if(image.input.is(':checked')) 
      unselect_avatar(image, jQuery(this)); 
     else 
      select_avatar(image, jQuery(this)); 
    } 
); 
}; 

function mycarousel_itemVisibleOutCallback(carousel, item, i, state, evt) { 
carousel.remove(i); 
}; 

function mycarousel_init(list) { 
// list parameter is ID user_avatar_select_X radio buttons and images 
// If list isn't valid, bail out 
if(!list.attr('id')) 
    return; 

// Add layer to picture for each list (ccrresponding to the choices for avatars) 
jQuery(".picture").append('<div class="avatar_layer" id="layer_'+list.attr('id')+'"></div>'); 

// Adds UL carousel_X with Tango Skin to each list 
list.append('<ul id="carousel_'+list.attr('id')+'" class="jcarousel-skin-tango"></ul>'); 

// Creates carousel for each list 
jQuery('#carousel_'+list.attr('id')).jcarousel({ 
    scroll: 3, 
    visible: 3, 
    wrap: 'circular', 
    //itemLoadCallback: itemLoadCallbackFunction, 
    itemVisibleInCallback: {onBeforeAnimation: mycarousel_itemVisibleInCallback}, 
    itemVisibleOutCallback: {onAfterAnimation: mycarousel_itemVisibleOutCallback} 
}); 
} 

jQuery(document).ready(function() { 
// Hide original ID user_avatar_select_X radio buttons and images 
// since we want them to be in carousels instead 
jQuery('div.user_avatar_select').parent().hide(); 

for(var i=0;i<10;i++) { 
    // Create a carousel based on ID user_avatar_select_X 
    mycarousel_init(jQuery('#user_avatars_select_'+i)); 
} 

// Hide the picture with ID current, since the user may want to build a new avatar 
jQuery(".picture #current").css({display: "none"}); 

// Show the default avatar, so the user can build a new avatar 
// Selected layers for the current avatar will be added on top 
jQuery(".picture").css({"position": "relative", "width": "200px", "height": "199px", "background-image": "url(/sites/default/files/default_avatar.gif)"}); 
});

출처

2013-04-21 Jacob Lear