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中。

<强> EXAMPLE

享受

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

2 个答案: