阻止图像堆叠？答案

【问题标题】：Stop images from stacking?阻止图像堆叠？
【发布时间】：2011-08-11 02:38:35
【问题描述】：

我正在制作一个小 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 在脚本运行时被隐藏。

【问题讨论】：

标签： jquery css plugins stack

【解决方案1】：

此时的其他答案只是查看 pre-js HTML 标记。后 jquery 标记完全不同，所以那些不会解决你的问题..

将 .slidercont 包装器从 <span> 更改为 <div>
将display: inline-block; 添加到.slidercont
将设置宽度/高度从 string 更改为 int（没有“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>

【讨论】：

它确实有效！我看到你在这个答案中做了很多工作！非常感谢！
没问题，很高兴它对你有用。我正在等待有史以来最长的上传，并有时间消磨；）

【解决方案2】：

将display: inline; 添加到<li>s。列表项默认堆叠（它们有display: list-item）。

【讨论】：

【解决方案3】：

你应该为<li>标签试试这个CSS：

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

我希望这会有所帮助。

【讨论】：