jQuery的淡入淡出滚动翻页

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(); 

，除非您滚动上面的代码工作正常，在页面的底部和淡入被称为自动滚动页面达的顶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，它应该工作