我在 Firefox 中的 Drupal 7 模块中有 jCarousel 0.2.8 与 jQuery 1.7.1 和 jQuery UI 1.8.11 完美配合。但是，轮播在 Internet Explorer 7、8、9 和 10 中无法正常工作。如何才能让它们在两种浏览器中正常加载？附上它在 FF 和 IE 中的截图。下面是我的 JavaScript/jQuery 代码。请注意，因为它是一个 Drupal 站点，所以使用 jQuery() 而不是 $()。
您可以测试我的网站上描述的问题：[demo link removed]
在 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)"});
});