Question

我正在尝试在我的网站上创建一个图像滑块，问题是当幻灯片更改时，其下带有文本的div会“跳转”一秒钟。其原因是因为带滑块的div的高度突然变为0（尽管我使用了淡入淡出，所以下一个图像应在前一个图像完全消失之前开始出现），我尝试将背景设置为只有Alfa，但它什么都没改变。我可以将滑块div的高度设置为特定大小，但这会导致它在不同的屏幕尺寸上无法正常工作...

滑块JS代码：

function schowaj(){
                $("#slider").fadeOut(500);
            }

function zmienslajd(){
                numer++; if (numer>5) numer=1;

                var plik = "<img width=\"100%\" height=\"auto\" src= \"slajdy/" + numer + ".bmp\" />"

                document.getElementById("slider").innerHTML = plik;
                $("#slider").fadeIn(500);
                setTimeout("zmienslajd()",7000);
                setTimeout("schowaj()", 6500);
            }

滑块html：

<div class="col-sm-12 col-md-8" style="margin:auto; width:100%; height:auto">
                <div id="slider"></div>
</div>

Answer 1

稍微破解一下解决方法，但是您可以更改opacity而不是使用fadeOut；这样一来，您就不会搞砸display属性了。将schowaj更改为：

function schowaj() {
    $("#slider").animate({
        opacity: 0
    }, 500);
}

然后在zmienslajd内，更改为：

$("#slider").animate({
    opacity: 1
}, 500);

图像滑块下的文字跳起

1 个答案: