图像滑块下方的文本跳起

问题描述 投票:0回答:1

我正在尝试在我的网站上创建一个图像滑块,问题是当幻灯片更改时,其下带有文本的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>
javascript jquery html
1个回答
0
投票

稍微修改一下解决方法,但是您可以更改opacity而不是使用fadeOut;这样一来,您就不会搞乱display属性。将schowaj更改为:

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

然后在zmienslajd内,更改为:

$("#slider").animate({
    opacity: 1
}, 500);
© www.soinside.com 2019 - 2024. All rights reserved.