Question

我正在制作一个小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。

Answer 1

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

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

Answer 2

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

Answer 3

您应该为<li>标记尝试此CSS：

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

我希望这会有所帮助。

停止堆叠图像？

3 个答案: