使用jQuery以特定时间间隔显示和隐藏div

Question

我想以特定间隔（10秒）显示div并显示下一个div并继续并重复相同的操作。 

**

序列 ：

**在第10秒显示div1，隐藏其他div， 5秒

后间隔显示div 2并隐藏其他div，

5秒后间隔显示div 3并隐藏其他div，

并每10秒重复一次。

代码遵循：

<div id='div1' style="display:none;"> 

  <!-- content -->

</div>

<div id='div2' style="display:none;"> 

  <!-- content -->

</div>

<div id='div3' style="display:none;"> 

  <!-- content -->

</div>

Answer 1

每10秒循环一次div。$(function () {&nbsp; &nbsp; var counter = 0,&nbsp; &nbsp; &nbsp; &nbsp; divs = $('#div1, #div2, #div3');&nbsp; &nbsp; function showDiv () {&nbsp; &nbsp; &nbsp; &nbsp; divs.hide() // hide all divs&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .filter(function (index) { return index == counter % 3; }) // figure out correct div to show&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .show('fast'); // and show it&nbsp; &nbsp; &nbsp; &nbsp; counter++;&nbsp; &nbsp; }; // function to loop through divs and show correct div&nbsp; &nbsp; showDiv(); // show first div&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; showDiv(); // show next div&nbsp; &nbsp; }, 10 * 1000); // do this every 10 seconds&nbsp; &nbsp;&nbsp;});

Answer 2

这是我提出的jQuery插件：$.fn.cycle = function(timeout){&nbsp; &nbsp; var $all_elem = $(this)&nbsp; &nbsp; show_cycle_elem = function(index){&nbsp; &nbsp; &nbsp; &nbsp; if(index == $all_elem.length) return; //you can make it start-over, if you want&nbsp; &nbsp; &nbsp; &nbsp; $all_elem.hide().eq(index).fadeIn()&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function(){show_cycle_elem(++index)}, timeout);&nbsp; &nbsp; }&nbsp; &nbsp; show_cycle_elem(0);}您需要为所有要循环的div设置一个公共类名，使用它如下：$("div.cycleme").cycle(5000)