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，它應該工作