Question

我在部分中有一个自动JavaScript幻灯片放映。幻灯片使用div而不是图像。当div为空时，幻灯片效果很好，但是当我在其中放一个元素时，整个div就会被压低很多。

我尝试通过应用负margin-top值来移动单个元素，但是没有用。弄乱代码后，我发现当我从该节的CSS中取出white-space: nowrap时，div不会被下推，但不会滑动。

<section style="margin-top: 167px">
    <section id="home">
        <div id="home1">

        </div>
        <div id="home2">

        </div>
        <div id="home3">

        </div>
    </section>
</section>

section{
    width: 99.9%;
    height: 750px;
    margin-top: 150px;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#home{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

#home1{
    background-image: url("../img/home1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

#home2{
    margin-left: -4px;
    background-image: url("../img/home2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#home3{
    margin-left: -4px;
    background-image: url("../img/home3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#home div{
    display: inline-block;
    width: 100%;
    height: 100%;
}

$(document).ready(function(){
    const NUMBER_OF_SLIDES = 3;
    var slide_width = document.getElementById('home').scrollWidth / NUMBER_OF_SLIDES; 
    var slide_number = 1;

    setInterval(function(){
        if (slide_number < NUMBER_OF_SLIDES){
            $("#home").animate({
                scrollLeft: slide_width * slide_number
            },500);                 
            slide_number++; 
        }else{
            $("#home").animate({
                scrollLeft: 0
            },500);
            slide_number = 1;
        }
    }, 4500);   
});

我希望能够将元素放入我的div中，而不会将div推下并保持幻灯片显示功能。

Answer 1

可能不是最好的解决方案，但是您可以做的是将每张幻灯片的内容封装在absolute位置的div中。像这样：

<div id="home1">
    <div class="content">Slide 1</div>
</div>
<div id="home2">
    <div class="content">Slide 2</div>
</div>
...

CSS：

#home .content {
    position: absolute;
}

使用“空白：nowrap”会导致div幻灯片显示问题

1 个答案: