Question

我已经看到堆栈溢出线程根据间隔显示或隐藏div。我不知道如何添加更多的块。重复只有两个块（block1和block2）。我需要添加第3和第4块。请帮帮我。我是jquery的新手。

代码：

var shortIntervalTime = 1500;
var longIntervalTime = 7500;

function cycle(id) {
    var nextId = (id == "block1") ? "block2" : "block1";
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(nextId)
    });
    // ---------------------------------------------
    // this code after here only for demo purposes
    var timer;
    var cntr;
    var iterations = 0;

    function initDisplayTimer() {
        cntr = 0;
        ++iterations;
        $("#iterations").html("Iterations: " + iterations);
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            ++cntr;
            $("#timer").html("Seconds: " + (cntr / 10).toFixed(1));
        }, 100);
    }
    // end of demo code
    // ---------------------------------------------
    cycle("block1");
});

Reference thread

提前致谢。

Answer 1

我只能在条件语句上看到分配nextId的修改。问号运算符适用于单一条件。因此，

替换此代码
var nextId = (id == "block1") ? "block2": "block1";

与
var nextId="";
if(id == "block1")
nextId="block2";
else if(id == "block2")
nextId="block3";
else if(id == "block3")
nextId="block4";
else if(id == "block4")
nextId="block1";

但是对于更大数量的块，你应该比if语句更进一步。

Answer 2

<强> http://jsfiddle.net/tamilmani/hT2yM/

试试这个演示......

var arr = ['block1','block2','block3'];

function cycle(id) {

    var nextId = (id < arr.length)?id:0;
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + arr[nextId])
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(++nextId)
    });
    }

Answer 3

使用此conde，您可以添加尽可能多的元素

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    function cycle(id) {
        var shortIntervalTime = 1 * 1000;
        var longIntervalTime = 2 * 1000;
        var next = ($('#'+id).next() && $('#'+id).next().attr('id')?$('#'+id).next().attr('id'):$('#'+id).parent().children()[0].id);
        $('#'+id).delay(shortIntervalTime)
            .fadeIn(500)
            .delay(longIntervalTime)
            .fadeOut(500, function() {cycle(next)});
    }
    $(function(){
        cycle('block1');
    });

    </script>
    <div id="blocks">
        <div id="block1">aaaa</div>
        <div id="block2">bbbb</div>
        <div id="asd">ccc</div>
    </div>

注意：所有<div>元素都应包含id，否则不会包含

使用setInterval显示和隐藏div更多阻止

3 个答案: