3

我知道之前有人问过这个问题，但是该解决方案不符合我的要求。

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%;
}

以下是该网站的链接

（删除链接）

4

1 回答 1

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，它应该可以工作

于 2013-08-16T14:59:56.247 回答