Проблема с каруселью в Internet Explorer 7 - PullRequest
0 голосов
/ 23 марта 2011

Следующий код JavaScript используется в карусели. Он отлично работает на mozilla, chrome и ie8, но кнопки ie и previous не работают в 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);
        });

    });
});

1 Ответ

0 голосов
/ 23 марта 2011

Я нашел решение. Требовался следующий CSS:

overflow:hidden
position:absolute

Это было для div, содержащего кнопку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...