Javascript изменить последовательность анимации без ввода

, что им ищет что-то, чтобы добавить в мой код, который изменит мою анимацию и сделать последовательность света идти автоматически без ввода данных пользователя ..Javascript изменить последовательность анимации без ввода

вот мой код до сих пор мне нужен код, который изменит его с кнопки, нажав кнопку, на автоматическую последовательность огней.

<h1>Changing HTML images</h1> 
<p> Click the button to change the Traffic Lights </p> 
<img id="myImage" onclick="changeimage()" src="red.jpg" width="100" height="180"> 

<button type ="button" 
onclick="changeimage()">Change the traffic light</button> 

<script> 
var counter = 0 
var image = ["red.jpg","redandorange.jpg","orange.jpg","green.jpg"] 

function changeimage() { 

    window.alert(counter) 
    counter++ 

    if(counter > 3){ 
     counter = 0 
    } 
    document.getElementById('myImage').src=image[counter] 
} 

</script> 
<body> 
</body> 
</html>

источник

2016-07-12 samwallace

Это просто - 'setInterval (changeimage, 1000),' –

только после того, когда ваша функция заканчивается. –

** _ Спасибо! _ ** – samwallace

Немного неуверенный, что вы спрашиваете, можете ли вы спросить, как сделать вызов функции или событие, без ввода пользователем.

Во-первых, если вам не нужны события и глядя на свой код, который вы не

в конце сценария место

// intervals create an idel wait loop and give you a handle to it 
// first argument function to run on loop fire 
// second argument time the idle wait is to wait before firing in milliseconds 
var IntervalH = setInterval(changeImage,30*1000)

Если вы хотите, чтобы очистить ваш код и сделать его нет конфликт я бы изменил, чтобы использовать закрытие.

(function ImageRotationClosure(){ 
    var counter = 0 
    var secondsWait = 10; 
    var image = ["red.jpg","redandorange.jpg","orange.jpg","green.jpg"] 

    setInterval(function changeimage() { 
     counter++ 
     if(counter > 3){ 
      counter = 0 
     } 
     document.getElementById('myImage').src=image[counter] 
    }, secondsWait*1000); 
})();

Это не только сделать ваш код меньше, но и сделать его безопасным как вар-х в замыкании только для закрытия, а не в глобальной области видимости EG окна, как таковой, он позволяет пользователям с помощью консоли браузеров (Firebug, WebKit Dev Tools) и url-инъекции EG javascript:images.push("somefile.jpg"); от беспорядка с вашим слайдером, как изящный плагин или что-то еще, что пользователь решил подключить туда браузер.

источник

2016-07-12 11:52:10

Вы можете использовать setInterval(method, intervalTime) или setTimeout(method, waitTime).

Самый простой в вашем конкретном случае - использовать setInterval. Например:

setInterval(changeimage, 500);

В более сложных случаях, вы хотите использовать setTimeout и перезапустить его самостоятельно. Это обеспечит минимальное заданное время между завершением метода и начнется следующего исполнения. Например:

var next = function() { 
    changeimage(); 
    setTimeout(next, 500); 
}; 
next();

источник

2016-07-12 11:52:18 user3297291

Javascript изменить последовательность анимации без ввода

ответ

Смежные вопросы