停止堆疊圖像？

我正在做一個小的jQuery插件，爲圖像和內容創建一個滑塊。然而，爲圖像/內容生成的跨度堆疊在另一個的頂部並且垂直溢出，而不是彼此並排並水平溢出。我已經使用CSS試過無數方法，它不工作...我正在使用的代碼如下：停止堆疊圖像？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>--> 
<script src="jquery.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
(function($) { 
    $.fn.slider = function(options) { 
     var settings = { 
      'delay': '5', 
      'height': '500px', 
      'width': '500px', 
      'anim': 'slide', 
      'slidedir':'right', 
     }; 
     var options = $.extend(settings, options); 
     return this.each(function() { 
      var o = options; 
      var slidenum=0; 
      $(this).hide(); 
      $(this).before('<div id="jqueryslider" style="overflow:scroll;max-height:'+o.height+';height:'+o.height+';width:'+o.width+'"></div>'); 
      $(this).find('li').each(function(){ 
       slidenum++; 
       var title=$(this).attr('title'); 
       var html=$(this).html(); 
       $('#jqueryslider').append('<span class="slidercont">'+html+'</span>'); 
       $('.slidercont img').css('width',o.width).css('height',o.height); 
      }); 

        }); 
    }; 
})(jQuery); 
$(document).ready(function(){ 
    $('#slider').slider(); 
}); 
</script> 
<ul id="slider"> 
<li title="Tulips"><img src="Tulips.jpg" /></li> 
<li title="Penguin"><img src="Penguins.jpg" /></li> 
</ul> 
</body> 
</html>

重要！ IT與li無關。那些只是爲了組織目的。實際顯示的內容是spans，其中的li的html。腳本運行時，隱藏UL和LI。

來源

2011-08-11 Kevin Pei

在這一點上的其他答案只是看着前js的HTML標記。後jQuery的標記是完全不同的，所以這些不會解決你的問題..

改變了.slidercont包裝從<span>到<div>
新增display: inline-block;到.slidercont
更改的設置寬度/高度int從string（no'px'，添加到功能）
循環後，將寬度#jqueryslider設置爲options.width * slidenum

這就是我通常用滑塊來解決這個問題的方法。最喜歡這個，所以我可以看看我是否做錯了這個...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<!--<script src="jquery.js"></script>--> 
</head> 
<body> 
    <style tyle="text/css"> 
     .slidercont { 
      display:inline-block; 
     } 
    </style> 
<script type="text/javascript"> 
(function($) { 
    $.fn.slider = function(options) { 
     var settings = { 
      'delay': '5', 
      'height': 500, 
      'width': 500, 
      'anim': 'slide', 
      'slidedir':'right', 
     }; 
     var options = $.extend(settings, options); 
     return this.each(function() { 
      var o = options; 
      var slidenum=0; 
      $(this).hide(); 
      $(this).before('<div style="overflow:scroll;max-height:'+o.height+'px;height:'+o.height+'px;width:'+o.width+'px;"><div id="jqueryslider"></div></div>'); 
      $(this).find('li').each(function(){ 
       slidenum++; 
       var title=$(this).attr('title'); 
       var html=$(this).html(); 
       $('#jqueryslider').append('<div class="slidercont">'+html+'</div>'); 
       $('.slidercont img').css('width',o.width + 'px').css('height',o.height + 'px'); 
      }); 
      $('#jqueryslider').css("width", slidenum*o.width); 
     }); 
    }; 
})(jQuery); 
$(document).ready(function(){ 
    $('#slider').slider(); 
}); 
</script> 
<ul id="slider"> 
<li title="Tulips"><img src="Tulips.jpg" /></li> 
<li title="Penguin"><img src="Penguins.jpg" /></li> 
</ul> 
</body> 
</html>

來源

2011-08-11 03:03:11

它實際上工作！我看到你已經在這個答案中做了很多工作！非常感謝！ –

沒問題，很高興它爲你工作。我等待有史以來最長的上傳，並有時間殺死;） –

將display: inline;加到<li> s。列表項目默認堆疊（他們有display: list-item）。

來源

2011-08-11 02:48:42 bfavaretto

你應該試試這個CSS爲<li>標籤：

#slider li { 
list-style-type:none; 
display:inline; 
}

我希望這有助於。

來源

2011-08-11 02:50:27 Nathan

停止堆疊圖像？

回答

相關問題