2011-03-23 46 views
0

传送带中使用以下JavaScript代码。它在Mozilla,Chrome和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

按钮不起作用?不可点击,不可见或无功能? 你有没有我们可以看的例子? – 2011-03-23 13:15:47

+0

实际上不起作用。即时在一个开发服务器上工作,所以我不能提供给你一个例子 - 对不起这个.. – ioannis 2011-03-23 13:27:16

+0

嗯,那么我的第一个猜测将是一个Z指数的问题... – 2011-03-23 13:53:03

回答

0

我已经想出了一个解决方案。它需要以下CSS:

overflow:hidden 
position:absolute 

这是为包含按钮的div。