更改Div的內容以循環顯示AD或Content或任何內容

Question

我有一個正在開發的網站，並且主頁上有多個Divs。 我在頁面的右側有一個div，標記為right_bar2，我希望它每5-10秒更改一次。 整個div只是作為鏈接的圖像。 基本上，我認為最簡單的方法是在一個div中包含一堆隱藏的div，然后也許某個javascript一次取消隱藏一個div，然后再次隱藏它並取消隱藏另一個div。 但是，我不確定最好的方法。 我看了很多示例，但無法使其正常工作100％。

感謝您的任何建議;）

JsFiddle示例很好！

我嘗試了類似http://jsfiddle.net/VENLh/4/的方法，但是在我的rails環境/設置中，它破壞了很多東西，因此我想更簡潔一些。

Answer 1

我在此小提琴中對其進行了一些清理，但是如果您說原始文件破壞了原始環境中的多個內容，則可能無法修復它們。 它到底打破了什么？

我清理的目的是避免對JS的DIV進行手動計數或擔心其ID。 代碼很簡單：

$(function() {
    var $divs = $('div', '#container'),
        total = $divs.length,
        counter = 0,

        showDiv = function() {
            $divs.stop().hide();
            $($divs[counter]).show('fast');
            counter = (conter + 1) % total;
            setTimeout(showDiv, 3000);
        };
    $divs.hide();
    showDiv();
});

``我沒有執行可能應該做的一項優化。 您可能應該在每個DIV上緩存jQuery選擇器的結果。 使用jQuery map語句會很容易，但是我不想在這里弄混。

Answer 2

在這種情況下，我可以看到的唯一問題是，如果您要使用較重的圖像，則可能需要花費一些時間來加載。 由於圖像將在您初次顯示時開始加載。 因此，為此，我要說您應該保持不透明度0並在頁面加載時加載圖像。

此外，要消除延遲，您可以使用不透明度來消除一個div被隱藏而另一個變得可見的延遲。 將不透明度從100降低到0％，將其他不透明度從0降低到100％。