Как изменить код setInterval для первоначального запуска действия интервала - PullRequest
Новая
       5

Как изменить код setInterval для первоначального запуска действия интервала

0 голосов
/ 05 октября 2011

Я не эксперт по 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.Я надеюсь, вы понимаете, чего я пытаюсь достичь.Спасибо за помощь.

Ответы [ 3 ]

3 голосов
/ 05 октября 2011

Просто позвоните showdiv() вручную в первый раз, выше того места, где вы установили таймер, и переместите инициализацию счетчика над ним: 

...
var counter = 1;
showDiv();
var timer = setInterval( showDiv, 4000);
...
1 голос
/ 05 октября 2011

Попробуйте следующее решение: 

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 () для применения эффектак переходу.

0 голосов
/ 05 октября 2011

Я бы предложил, чтобы ваш первый div был виден с самого начала с помощью css. В вашем JavaScript сделайте setInterval, как вы изначально запрограммировали. Начните свой счетчик как 1. В showDiv подними его. Оставьте первоначальный чек, куда вы вернетесь. В остальном это должно работать. Вернись ко мне, если это не так. Завтра я напишу реальный код на моем компьютере.

...