Question

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

在我的主页上我有php包含'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;
}

如何在div中旋转内容？

1 个答案: