如何修改setInterval代码以初始触发Interval动作

How to Modify setInterval Code to Trigger the Interval Action Initially

本文关键字：动作 Interval 代码 何修改 修改 setInterval      更新时间：2023-09-26

我不是一个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秒显示，然后关闭它并打开下一个。我需要改变的是删除这10秒的时间间隔为第一个div，所以它与页面打开，并留下其他div的时间间隔，因为它是。我希望你能理解我的努力。谢谢你的帮助。

第一次手动调用showdiv()，在您设置计时器的上方，并将计数器初始化移动到其上方:

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

尝试以下解决方案:

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()来应用效果到过渡

我建议您的第一个div从一开始就使用css可见。在你的javascript做setInterval作为你最初的编程。将计数器设置为1。在showDiv中提高它。在返回的地方放弃初始检查。对于其余部分，这应该是可行的。如果不行就告诉我。我明天会在我的电脑上写真正的代码。

相关文章：