Question

我不是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>

现在这个脚本做的是在页面打开后10秒进行第一次div show，然后关闭它并打开下一个。我需要改变的是删除第一个div的10秒时间间隔，使其与页面一起打开，并保留其他div的时间间隔。我希望你明白我想要完成的事情。谢谢你的帮助。

Answer 1

首次手动调用showdiv()，高于您设置定时器的位置，并将计数器初始化移到其上方：

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

Answer 2

尝试以下解决方案：

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（）将效果应用于过渡。

Answer 3

我建议您从头开始使用css显示第一个div。在您的javascript中，按照最初编程的方式执行setInterval。以1开始你的柜台。在showDiv中提升它。删除您返回的初始检查。其余的这应该工作。如果没有，请回复我。我明天会在我的电脑上写下实际代码。

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

3 个答案: