初学者jQuery幻灯片放映灯箱错误

这是我的HTML

<div id="images">
<img alt="" class="show" src="./images/Cars (1).jpg" />
<img alt="" src="./images/Cars (2).jpg" />
<img alt="" src="./images/Cars (3).jpg" />
<img alt="" src="./images/Cars (4).jpg" />

</div>

这是我的JavaScript和Css

$(function(){
                slideShow();
                $('img').click(function(){
                    $('<div>',{
                        id : "overlay"
                    }).css({'width':'100%' 
                    ,'height':'100%',
                    'position':'fixed',
                    'top':'0',
                    'left':'0',
                    '-z-index':'1',
                    'background' : '#000',
                    'opacity' : '.6'}).appendTo("body");

                    $('<img>',{
                        src : $(this).attr(src)
                    }).css({
                        '-z-index' : '1001',
                        'width':'100%',
                        'height':'100%',
                    }).appendTo("#overlay");
                });
            });
            function slideShow(){
                var current = $('.show');
                var next = current.next().length ? current.next() : current.siblings().first();
                current.hide().removeClass('show');
                next.fadeIn().addClass('show');
                setTimeout(slideShow, 3000);
            }

$（函数（）{
幻灯片（）；
$（'img'）。单击（函数（）{
$('',{
id:“覆盖”
}).css（{'width'：'100%'
，“高度”：“100%”，
“位置”：“固定”，
“顶部”：“0”，
“左”：“0”，
“-z索引”：“1”，
“背景”：“000”，
'不透明'：'.6'}）.appendTo（“body”）；
$('
幻灯片播放正常，叠加元素添加到正文中。但是img标记没有附加到“叠加”中。错误是什么？
您应该在img.click函数中以编程方式附加div元素“叠加”。
$（“body”）.append（$（“#overlay”）；

或者干脆放


html页面上的某个地方。
只需做一个小改动即可解决此问题，如下所示：

$(function () {
    $('img').click(function () {
        $('<div>', {
            id: "overlay"
        }).css({
            'width': '100%',
                'height': '100%',
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'z-index': '1',
                'background': '#000',
                'opacity': '.6'
        }).appendTo("body");

        $("#images").appendTo($("#overlay"));

        $('<img>', {
            src: $(this).attr(src)
        }).css({
            'z-index': '1001',
                'width': '100%',
                'height': '100%'
        });
    });
});

slideShow();

function slideShow() {
    var current = $('.show');
    var next = current.next().length ? current.next() : current.siblings().first();
    current.hide().removeClass('show');
    next.fadeIn().addClass('show');
    setTimeout(slideShow, 3000);
}

$（函数（）{
$（'img'）。单击（函数（）{
$('', {
id:“覆盖”
}).css({
“宽度”：“100%”，
“高度”：“100%”，
'位置'：'固定'，
“顶部”：“0”，
“左”：“0”，
“z索引”：“1”，
“背景”：“000”，
“不透明度”：“6”
}).附于（“主体”）；
$（“#图像”）。附加到（$（“#覆盖”）；
$('
现在，您的#图像将附加到#覆盖中


享受为什么
-z-index
而不是
z-index
？