Помощь с setInterval и setTimeout. "Карусель"
Проблема такая, при запуске интервала он стартует почти как надо.
Я хочу поставил кнопку для паузы интервала, но работает не так как надо в чем проблема? + (при загрузке страницы,надо чтоб интервал сразу стартовал). Я написал это но не знаю грамотно или нет. Прошу код не менять, если нет большой необходимости. Если код поменяли, пожалуйста прокомментируйте. Только на JS https://jsfiddle.net/nx8qvepq/2/ |
mishapod,
JS-Анимация |
mishapod,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.div {
width: 150px;
height: 30px;
background-color: red;
float: left;
margin-right: 2px;
margin-bottom:10px;
margin-top:10px;
}
button {
width: 100px;
height: 40px;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
(function(){
var elem, startInterval, widthBlock,
btn1 = document.getElementById('click1'),
btn2 = document.getElementById('click2'),
collectionBlocks = document.getElementById('collection_divs');
function clear()
{
window.clearTimeout(startInterval)
}
function minWidth(){
clear();
elem = collectionBlocks.children[0];
widthBlock = elem.clientWidth;
widthBlock -= 2;
if (widthBlock > 0) {
elem.style.width = widthBlock + 'px';
startInterval = setTimeout(minWidth, 30)
}
else {
collectionBlocks.appendChild(elem);
elem.style.width = '150px';
startInterval = setTimeout(minWidth, 3000)
}
}
minWidth()
btn2.onclick = minWidth
btn1.onclick = clear
})();
});
</script>
</head>
<body>
<button id="click1">stop</button>
<button id="click2">start</button>
<div id="collection_divs">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</div>
</body>
</html>
|
Спасибо, если не сложно, можете сказать где была проблема?
|
Цитата:
|
| Часовой пояс GMT +3, время: 17:26. |