停止堆叠图像？

我正在做一个小的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

停止堆叠图像？

回答

相关问题