时间戳

首页 > 解决方案 > 当下载栏出现在底部时，页面上的幻灯片内容会跳起来

javascript - 当下载栏出现在底部时，页面上的幻灯片内容会跳起来

问题描述

每当下载栏出现在底部时，主页上的幻灯片内容就会跳起来。一旦我关闭下载栏，它就会回到正常位置。https://photos.app.goo.gl/F482eMfkXyfEZkdA9。

我猜它与CSS有关。希望有人可以提供帮助。抱歉，如果之前有人问过类似的问题，但我看了看，找不到任何东西，而且我对这个领域还很陌生。

这是CSS代码：

#slideshow > div {
    width: 970px;
    height: 500px;
    display: block;
    float: left;
    position: absolute;
    bottom: -5px;
    right: auto;
    background-repeat: no-repeat;
    margin-left: 20px;
    line-height: 180px;
}

JavaScript：

$("#slideshow > div:gt(0)").hide();
    setInterval(function() {
        $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}, 5000);

标签： javascripthtmlcss

解决方案

而不是将元素对齐到bottom: -5px;使用top对齐来避免这种行为。

 #slideshow > div 
    {
    width: 970px;
    height: 500px;
    display: block;
    float: left;
    position: absolute;
    top: 150px; /*  <-  change this   */ 
    right: auto;
    background-repeat: no-repeat;
    margin-left: 20px;
    line-height: 180px;
    }

推荐阅读