2011-03-23 4 views
0

다음 자바 스크립트 코드는 캐 러셀에서 사용됩니다. 모질라, 크롬 및 ie8에서는 잘 작동하지만 다음 및 이전 버튼은 ie7에서 작동하지 않습니다. 노력해 주셔서 대단히 감사합니다.Internet Explorer 7 캐 러셀 문제

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); 
     }); 

    }); 
}); 
+0

버튼이 작동하지 않습니까? 클릭 할 수 없거나 보이지 않거나 기능적이지 않습니까? 우리가 볼 수있는 예제가 있습니까? –

+0

실제로 작동하지 않습니다. 인스턴트 개발 서버에서 일하고있어, 그래서 내가 당신에게 예제를 제공 할 수 없습니다 - 미안 해요. – ioannis

+0

흠, 그러면 내 첫 번째 추측은 Z- 인덱스 문제가 될 것입니다 ... –

답변

0

해결책을 찾았습니다. 다음 CSS가 필요합니다.

overflow:hidden 
position:absolute 

이것은 버튼이있는 div 용입니다.