Question

我知道之前已经问过这个问题，但解决方案不符合我的要求。

HTML

<div id="slider" class="contentPanel">
    <div class="content">
        <img src="images/slide1.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide2.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide3.jpg" alt="aliyah creations">
    </div>
</div>

JS

function fadeContent() {
   $(".contentPanel .content:hidden:first").fadeIn(500).delay(5000).fadeOut(500, function() {
       $(this).appendTo($(this).parent());
       fadeContent();
   });
};

fadeContent();

上面的代码工作正常，除非你滚动到页面的底部，并且当调用fadeIn时，它会自动将页面向上滚动到div的顶部。

以前的解决方案是设置div的固定高度，但我希望网站根据用于查看它的屏幕分辨率做出响应。

这是CSS

#slider{
    float:left;
    height:auto;
    width:100%;
    border-style: none;
    position:relative;
    margin: 0px;
}

.content { 
    float:left;
    max-height:400px;
    width:100%;
    background-color:black;
    background-size: 50% auto;
    text-align:center;
    display: none; 
}

.content img{
    max-width:100%;
}

下面是该网站的链接

（已删除链接）

Answer 1

抱歉，您的网站链接对我不起作用，它只是继续加载，但我认为这是一个图像滑块类型的东西，所以：

您可以使用占位符透明图像填充淡出图像区域的空间。由于您的网站响应（也许）。您需要使此占位符文件与图像具有相同的宽高比，或使其与图像的大小相同。因此占位符图像将确保该区域始终具有高度。褪色时，内容不会变得更短或更高，因为占位符与其他图像的大小或宽高比相同。

如果使用具有相同宽高比的图像，则其宽度应为100％，因此它会扩展容器的宽度，就像幻灯片放映图像一样。这是我使用的实现，可能有更好的方法来做到这一点，但我认为这个解决方案相当容易，不需要js，只有1个额外的图像，如果你采用宽高比方式可能非常小。

像

这样的东西

<div id="slider" class="contentPanel">
    <div class="content">
        <img src="images/slide1.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide2.jpg" alt="aliyah creations">
    </div>

    <div class="content">
        <img src="images/slide3.jpg" alt="aliyah creations">
    </div>
    <div class="placeholder">
        <img src="images/placeholder.jpg" alt="aliyah creations">
    </div>
</div>

然后将相同的css应用于占位符div，它应该工作

Jquery fadeIn fadeOut向上滚动页面

1 个答案: