使用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 () {

    var counter = 0,

        divs = $('#div1, #div2, #div3');

    function showDiv () {

        divs.hide() // hide all divs

            .filter(function (index) { return index == counter % 3; }) // figure out correct div to show

            .show('fast'); // and show it

        counter++;

    }; // function to loop through divs and show correct div

    showDiv(); // show first div    

    setInterval(function () {

        showDiv(); // show next div

    }, 10 * 1000); // do this every 10 seconds    

});

Answer 2

这是我提出的jQuery插件：

$.fn.cycle = function(timeout){

    var $all_elem = $(this)

    show_cycle_elem = function(index){

        if(index == $all_elem.length) return; //you can make it start-over, if you want

        $all_elem.hide().eq(index).fadeIn()

        setTimeout(function(){show_cycle_elem(++index)}, timeout);

    }

    show_cycle_elem(0);

}

您需要为所有要循环的div设置一个公共类名，使用它如下：

$("div.cycleme").cycle(5000)