0

我在 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 中修复此问题的任何帮助将不胜感激！谢谢！！

Firefox 和 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)"});
});
4

1 回答 1

0

在 CSS 中，我为轮播中的图像设置了特定的高度和宽度，并修复了它。他们有 height: auto 但我猜这对 IE 来说还不够好。

于 2013-04-23T06:51:09.730 回答