为Animated Collapsible DIV添加了一个计时器

时间:2011-01-17 15:06:54

标签: javascript jquery timer

我已使用http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm来完成此操作:[link-removed]。

我正在尝试找到JavaScript在连续循环中循环浏览四个菜单中的每个菜单的最佳方式,而无需任何用户交互,但无法思考如何执行此操作!

还有一个我无法解决的错误:它会记住你在哪个菜单,但背景图片总是来自页面加载的最后一个菜单。

谢谢!

2 个答案:

答案 0 :(得分:1)

setInterval((function(){
  var count=0;
  return function(){
    var f;
    switch(count++%4) {
      case 0: f='one';break;
      case 1: f='two';break;
      case 2: f='three';break;
      case 3: f='four';break;
    }
    animatedcollapse.show(f);
  };
})(),2000);

这是有效的(我按照你的代码注入并滚动),虽然如果你给你的img元素数字id,如“roller_0”,“roller_1”等,可能会缩短很多,然后整个开关中间可以省略......

我应该指出,我已经将函数包装在一个闭包中,以避免使用全局变量,尽管它也可以在没有它的情况下工作。

最后,关于图像是重置之前查看的最后一个图像的问题,你可以通过onload调用轻松纠正它,只是随意显示第一个图像,尽管一旦你完成了这个自动滚动,你可能看不到必要的。

答案 1 :(得分:0)

使用jQuery,您可以使用trigger()方法“模拟”用户交互。这通常有助于避免重复。 E.g:

var timer = setInterval(function(){
    var current =  $('.image:visible');
    var next = current.nextAll('.image:first').length ? current.nextAll('.image:first') : $('.image:first');
    next.previous('.header a').trigger('.click');
}, 2000); 

(未经过测试。)