jquery项目类的定时更改

时间:2009-08-11 21:34:46

标签: jquery

是否可以根据某种类型的计时器更改项目类或ID?每隔1500毫秒,它会嘿 - 那里1,然后1500毫秒后嘿 - 那里......等等......我可以控制它通过多少间隔..

  • 哎-有
  • 哎-有-1
  • 哎-有-2
  • 哎-有-3
  • (回到开始)嘿 - 那里

由于

3 个答案:

答案 0 :(得分:4)

这样的插件功能可以让你做你想做的事:

jQuery.fn.rotateClasses = function(classes, interval, max) {
    var currentRotation = 0;
    var timer = null;

    var rotateFn = (function() {
            var currentClass = currentRotation % classes.length;

        var previousClass = currentClass - 1;
        if(previousClass == -1) previousClass = classes.length - 1;

        this.addClass(classes[currentClass]).removeClass(classes[previousClass]);

        currentRotation += 1;

            if(max > 0 && currentRotation >= max) clearInterval(timer);
    })();

    timer = setInterval(rotateFn, interval);

    return this;
};

然后您可以使用以下方法调用它:

$('#mydiv').rotateClasses(["class1", "class2", "class3"], 1000, 20);

只需根据需要修改参数即可。第一个参数是要旋转的类数组,第二个是旋转它们的间隔,第三个参数是最大迭代次数。如果设置为0,则会无限期地重复广告。

答案 1 :(得分:3)

我建议不要更改元素的ID - 而是选择“frame1 / frame2 / frame3”类。

$(function() {
  var $target = $("#hey-there");
  var classes = ['frame0', 'frame1', 'frame2', 'frame3'];
  var current = 0;

  setInterval(function() {
    $target.removeClass(classes[current]);
    current = (current+1)%classes.length;
    $target.addClass(classes[current]);
  }, 1500); // 1500 ms loop
});

答案 2 :(得分:0)

请参阅:

setTiemOut
setInternal

var pp = 0;

jQuery("#id").html(jQuery("#id").html() + "<div>hey there"+(pp++)+"</div>");