阻止图像堆叠？

发布于 2024-11-29 03:32:40 字数 2080 浏览 0 评论 0原文

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

原文

I'm making a little jQuery plugin that creates a slider for images and content. However, the spans generated for the images/content are stacking ontop of another and overflowing vertically instead of sitting beside each other and overflowing horizontally. I've tried numerous ways using css and it doesn't work... The code I'm using is below:

<!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>

IMPORTANT! IT has nothing to do with the li's. Those are only there for organizational purposes. The actual thing that is displayed is in spans that have the html of the li's. The UL and LI's are hidden when the script is run.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你是年少的欢喜 2024-12-06 03:32:40

此时的其他答案只是查看 pre-js HTML 标记。 post-jquery 标记完全不同，因此这些无法解决您的问题。

将 .slidercont 包装器从更改为
;
添加了 display: inline-block; 到 .slidercont
将设置宽度/高度从 string 更改为 int代码> （没有“px”，将其添加到函数中）
循环后，将 #jqueryslider 的宽度设置为 options.width * slipnum

这就是我通常使用滑块解决此问题的方法。收藏了这个，以便我看看我是否做错了......

<!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>

The other answers at this point are just looking at the pre-js HTML markup. The post-jquery markup is quite different, so those won't fix your problem..

Changed the .slidercont wrapper from <span> to <div>
Added display: inline-block; to .slidercont
Changed settings width/height to int from string (no 'px', added that to function)
After looping, set the width of #jqueryslider to options.width * slidenum

This is how I usually approach this problem with sliders. Favorited this so I can see if I'm doing this wrong...

<!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>

回复收藏 0 原文

长伴 2024-12-06 03:32:40

将 display: inline; 添加到

中。列表项默认堆叠（它们具有 display: list-item）。

回复收藏 0 原文

尘曦 2024-12-06 03:32:40

您应该尝试使用

标签使用此 CSS：

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

我希望这会有所帮助。

You should try this CSS for the <li> tags:

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

I hope this helps.

回复收藏 0 原文

~没有更多了~

关于作者

或十年

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

阻止图像堆叠？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

阻止图像堆叠？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。