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

Question

这是我的 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 标签没有附加到#overlay 是什么错误？

Answer 1

您应该在 img.click 函数中以编程方式附加 div 元素 #overlay。 $("body").append($("#overlay"));

或者只是把

<div id="overlay"></div>

在您的 html 页面上的某个位置。

Answer 2

只需稍作改动即可解决此问题，如下所示：

$(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);
}

现在您的#images 被附加在#overlay 中。

例子

享受