Question

以下javascript代码用于轮播。它在mozilla，chrome和ie8上工作正常，但是下一个和前一个按钮在ie7中不起作用。非常感谢您的努力。

jQuery(function() {
    jQuery("#cakes-carousel").each(function(){
        var itemWidth = 405;
        var Container = jQuery(this);
        var List = jQuery('ul', Container);
        var Items = List.find('li');
        var Previous = jQuery('.previous a', Container);
        var Next = jQuery('.next a', Container);
        List.width(Items.length * itemWidth).css('position', 'relative');
        function CheckButtons(index)
        {
            if(index + 1 >= Items.length)
            {
                Next.parent().addClass("disabled");
            }
            else{
               Next.parent().removeClass("disabled");
            }

            if(index - 1 < 0)
            {
                Previous.parent().addClass("disabled");
            }
            else{
               Previous.parent().removeClass("disabled");
            }
        }

        function GetDescriptionElement(listItem)
        {
            var id = listItem.attr("id");
            if(!id){
                return null;
            }
            return jQuery("#description-" + id.replace("carousel-",""),Container);
        }

        function Scroll(listItem) {
            List.stop();
            var index = Items.index(listItem);
            CheckButtons(index);
            var left = index * itemWidth * -1;

            var descriptionElement = GetDescriptionElement(listItem);
            var oldDescriptionElement = GetDescriptionElement(List.find('li.active'));

            descriptionElement.fadeIn(500);
            if(oldDescriptionElement)
                oldDescriptionElement.fadeOut(500);

            List.animate({ left: left }, 500, 'swing',
            function() {
                List.find('li.active').removeClass('active');
                listItem.addClass('active');
            });
        }

        Previous.click(function(e) {
            e.preventDefault();
            if(jQuery(this).parent().hasClass("disabled")){
                return;
            }
            var item = List.find('li.active').prev(':first');
            if (!item.length) {
                item = Items.filter(':last');
            }
            Scroll(item);
        });
        Next.click(function(e) {
            e.preventDefault();
           if(jQuery(this).parent().hasClass("disabled")){
                return;
            }
            var item = List.find('li.active').next(':first');
            if (!item.length) {
                item = Items.filter(':first');
            }
            Scroll(item);
        });

    });
});

Answer 1

我找到了解决方案。它需要以下CSS：

overflow:hidden
position:absolute

这是包含按钮的div。

Internet Explorer 7轮播问题

1 个答案: