如何修改 setInterval 代码以最初触发间隔操作

发布于 2024-12-08 11:36:49 字数 1071 浏览 0 评论 0原文

我不是 JavaScript 专家，但我找到了一个可以帮助我完成我需要的脚本，但我需要对其进行一些小的修改。这是 JS 代码：

$('html').addClass('js');

$(function() {

  var timer = setInterval( showDiv, 4000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('#div1, #div2, #div3, #div4')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 4? counter = 0 : counter++; 

  }

});

这里是 html 代码：

<div id='container'>
<div id='div1' class='display' style="background-color: red;"> 
  div1
</div>

<div id='div2' class='display' style="background-color: green;"> 
  div2
</div>

<div id='div3' class='display' style="background-color: blue;"> 
  div3
</div>
<div id='div4' class='display' style="background-color: yellow;"> 
  div4
</div>
<div>

现在这个脚本所做的是使第一个 div 在页面打开 10 秒后显示，然后关闭它并打开下一个。我需要更改的是删除第一个 div 的 10 秒时间间隔，以便它与页面一起打开，并按原样保留其他 div 的时间间隔。我希望你明白我想要实现的目标。感谢您的帮助。

原文

Im not an JavaScript expert but I found a script which will help me accomplish what I need, however I need a small modification on it. Here is JS code:

$('html').addClass('js');

$(function() {

  var timer = setInterval( showDiv, 4000);

  var counter = 0;

  function showDiv() {
    if (counter ==0) { counter++; return; }

    $('#div1, #div2, #div3, #div4')
      .stop()
      .hide()
      .filter( function() { return this.id.match('div' + counter); })   
      .show('fast');
    counter == 4? counter = 0 : counter++; 

  }

});

and here is an html code:

<div id='container'>
<div id='div1' class='display' style="background-color: red;"> 
  div1
</div>

<div id='div2' class='display' style="background-color: green;"> 
  div2
</div>

<div id='div3' class='display' style="background-color: blue;"> 
  div3
</div>
<div id='div4' class='display' style="background-color: yellow;"> 
  div4
</div>
<div>

now what this script do is make first div showup 10 seconds after page opens and then close it and open next one. What I need to change is to remove that 10 seconds time interval for first div so it open with the page and leave that time interval for other divs as it is. I hope you understand what Im trying to accomplish. Thanks for help.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

拥有 2024-12-15 11:36:49

第一次只需在设置计时器的位置手动调用 showdiv() 并将计数器初始化移至其上方：

...
var counter = 1;
showDiv();
var timer = setInterval( showDiv, 4000);
...

Simply call showdiv() manually the first time, above where you set the timer and move the counter initialization above it:

...
var counter = 1;
showDiv();
var timer = setInterval( showDiv, 4000);
...

回复收藏 0 原文

红玫瑰 2024-12-15 11:36:49

尝试以下解决方案：

showDiv();
var timer = setInterval(showDiv, 4000);

var counter = 1;
function showDiv(){
  $('.display').hide();
  $('#div'+counter).show();
  (counter == 4 ? counter = 1 : counter++)
}

工作示例：http://jsfiddle.net/3cKJV/

您还可以利用 jQuery 函数 animate() 或 fadeIn() 对过渡应用效果。

Try the following solution:

showDiv();
var timer = setInterval(showDiv, 4000);

var counter = 1;
function showDiv(){
  $('.display').hide();
  $('#div'+counter).show();
  (counter == 4 ? counter = 1 : counter++)
}

Working example: http://jsfiddle.net/3cKJV/

You can also utilize the jQuery functions animate() or fadeIn() to apply an effect to the transition.

回复收藏 0 原文

鹤仙姿 2024-12-15 11:36:49

我建议你的第一个 div 从一开始就使用 css 可见。
在您的 javascript 中按照您最初编程的方式执行 setInterval 。
将计数器从 1 开始。
在 showDiv 中提高它。将初始支票放在您返回的地方。
对于其余的，这应该有效。如果没有，请回复我。
明天我会在我的电脑上编写实际的代码。