Форум

tihonan · #1 (**permalink**) 06.08.2015, 13:34

Как сделать что бы через 3 секунды менялись div блоки?

<div id="main">
<div>Текст первого блока</div>
<div>Текст второго блока</div>
<div>Текст третьего блока</div>
</div>

AntonMs · #2 (**permalink**) 06.08.2015, 14:09

main = document.getElementById('main')
thisText = main.getElementsByTagName('div')

setTimeout(function(){

thisText[0].innerHTML='Новый текст'
thisText[1].innerHTML='Новый текст2'
thisText[2].innerHTML='Новый текст3'

},3000)

tihonan · #3 (**permalink**) 06.08.2015, 15:04

а что бы текст прописывался в самих дивах а не в скрипте?
Сперва показывался блок
<div>Текст первого блока</div>
потом вместо него
<div>Текст второго блока</div>
и потом
<div>Текст третьего блока</div>

AntonMs · #4 (**permalink**) 06.08.2015, 17:04

Ты имеешь ввиду чтобы они были скрыты и показывались по очереди не останавливаясь?

Decode · #5 (**permalink**) 06.08.2015, 19:21

tihonan, так?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    #main div {
      display: none;
    }
  </style>
</head>
<body>
  <div id="main">
    <div>Текст первого блока</div>
    <div>Текст второго блока</div>
    <div>Текст третьего блока</div>
  </div>
  
  <script>
    var main = document.querySelector('#main'),
        mainChilds = [].slice.call( document.querySelectorAll('#main div') ), i = 0;


    setInterval(function() {
      mainChilds.forEach(function(item) {
        item.style.display = 'none';
      });

      mainChilds[i % mainChilds.length].style.display = 'block';
      i++;
    }, 3000);
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript