jquery – 停止堆叠图像？

2019年8月3日 121次阅读

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

重要！它与李的无关.这些仅用于组织目的.显示的实际内容是具有li的html的跨度.运行脚本时隐藏UL和LI.

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

>从< span>更改了.slidercont包装器到< div>
>新增显示：内联块;到.slidercont
>将设置宽度/高度更改为字符串中的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>
点赞