Изменение div по времени
Как сделать что бы через 3 секунды менялись div блоки?
<div id="main"> <div>Текст первого блока</div> <div>Текст второго блока</div> <div>Текст третьего блока</div> </div> |
main = document.getElementById('main')
thisText = main.getElementsByTagName('div')
setTimeout(function(){
thisText[0].innerHTML='Новый текст'
thisText[1].innerHTML='Новый текст2'
thisText[2].innerHTML='Новый текст3'
},3000)
|
а что бы текст прописывался в самих дивах а не в скрипте?
Сперва показывался блок <div>Текст первого блока</div> потом вместо него <div>Текст второго блока</div> и потом <div>Текст третьего блока</div> |
Ты имеешь ввиду чтобы они были скрыты и показывались по очереди не останавливаясь?
|
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>
|
| Часовой пояс GMT +3, время: 07:01. |