javascript - 如何旋转div中的内容？

Question

我有一个 div 位于页面的左侧，它有另一个 div，内容填充了 div，我想做的是交换内部 div，10 秒后另一个 div 填充不同的内容.并在 10 秒后再次旋转回第一个 div，依此类推。

在我的主页上，我有 php include of 'left_box.php'.. 在那个页面上，代码看起来像

<div class="span3 main_div">

<!-- first div -->
  <div class="well sidebar-nav transfer-central">
    <?php include 'includes/transfer_central.php'; ?>
  </div>

<!-- second div -->
  <div class="well sidebar-nav fixture-results">
    <?php //include 'includes/fixture-results.php'; ?>
  </div>

</div>

我已经把我想出现在主 div 中的两个 div(包括)都放了，但目前只出现了第一个 div ..但是 10 秒后我如何让第二个 div 替换主 div 中的第一个 div ？

我环顾四周，似乎无法理解它

Answer 1

JSFiddle:http://jsfiddle.net/Arj2C/

HTML:

<div id="outerdiv">
    <div class="" id="1">
        <!--content-->
    </div>
    <div class="hidden" id="2">
        <!--content-->
    </div>
    <div class="hidden" id="3">
        <!--content-->
    </div>
    <div class="hidden" id="4">
        <!--content-->
    </div>
</div>

JS(使用 jquery):

var next = 2;
$(function(){
    setInterval(function(){
        if(next == 1) $("#4").toggleClass("hidden");
       $("#" + (next-1)).toggleClass("hidden");
       if(++next == 5) {
           //$("#4").toggleClass("hidden");
           $("#" + (next-1)).toggleClass("hidden");
           next = 1;
       } else $("#" + (next-1)).toggleClass("hidden");
    }, 10000);
});

CSS:

.hidden {
    display: none;
}