2016-02-27 3 views
0

Я делаю код с меняющимися изображениями в массиве, я дошел до того, что изображения меняются автоматически, но я хочу получать разные промежутки времени между изображениями по мере их изменения. Я пишу код в Dreamweaver.image array javascript automatic

Вот код, как сейчас:

<!DOCTYPE html> 
<html> 
<body> 


<img src="image1.png" width="74" height="208" id="image1"> 
<br> 
<button onclick="clearInterval(MyVar)">Stop Sequence</button> 

<script> 

MyVar = setInterval(ChangeImages, 1000) 

function Start() { 
myVar = setInterval(ChangeImages, 1000) 
} 


var Images = ["image1.png", "image2.png","image3.png","image4.png"]; 


var image = document.getElementById("image1"); 




function ChangeImages() 
{ 
    if (image1.src.match(Images[0])) 

    { 
     image.src = Images[1]; 

    } else if (image1.src.match(Images[1])) 

    { 
     image.src = Images[2]; 
    } else if (image1.src.match(Images[2])) 

    { 
     image.src = Images[3]; 
    } else if (image1.src.match(Images[3])) 

    { 
     image.src = Images[0]; 

    } 
} 
</script> 

<br> 

<Button onclick="Start() ">Resume</button> 

</body> 

</html> 

Любая помощь будет принята с благодарностью.

Благодаря

+0

что текущая проблема? – RomanPerekhrest

+0

Что такое 'разные времена', как это должно быть установлено? –

+0

Красивая история. У вас возникли вопросы? – cronoklee

ответ

0

Если вы хотите изменить количество секунд, каждый раз, когда вы могли бы использовать SetTimeout вместо setInterval, а затем сделать обратный вызов в конце ChangeImages. И используйте генератор случайных чисел, чтобы получить количество миллисекунд. В приведенном ниже примере я установил его в 1000, 2000 или 3000 миллисекунд.

<img src="image1.png" width="74" height="208" id="image1"> 
<br> 
<button onclick="clearInterval(myVar)">Stop Sequence</button> 

<script> 

function Start() { 
    myVar = setTimeout(ChangeImages, randomInterval(1,3)); 
} 
var Images = ["image1.png", "image2.png","image3.png","image4.png"]; 
var image = document.getElementById("image1"); 
function randomInterval(min,max) 
{ var number = (Math.floor(Math.random()*(max-min+1)+min))*1000; 
    console.log(number); 
    return number; 
} 

function ChangeImages(){ 
    if (image1.src.match(Images[0])){ 
     image.src = Images[1]; 
    } 
    else if (image1.src.match(Images[1])){ 
     image.src = Images[2]; 
    } 
    else if (image1.src.match(Images[2])){ 
     image.src = Images[3]; 
    } 
    else if (image1.src.match(Images[3])){ 
     image.src = Images[0]; 
    } 
    Start(); 
} 
</script> 

<br> 

<Button onclick="Start() ">Resume</button> 

EDIT

function Start(timeout) { 
    myVar = setTimeout(ChangeImages, timeout); 
} 
var Images = ["image1.png", "image2.png","image3.png","image4.png"]; 
var image = document.getElementById("image1"); 

function ChangeImages(){ 
    if (image.src.match(Images[0])){ 
     image.src = Images[1]; 
     Start(1000); 
    } 
    else if (image.src.match(Images[1])){ 
     image.src = Images[2]; 
     Start(2000); 
    } 
    else if (image.src.match(Images[2])){ 
     image.src = Images[3]; 
     Start(3000); 
    } 
    else if (image.src.match(Images[3])){ 
     image.src = Images[0]; 
     Start(4000); 
    } 
} 
+0

Что делать, если бы я хотел установить время между каждым изображением, таким образом, каждый поворот изображений – bensy

+0

Затем передайте параметр в функцию Start и вызовите его в условных операторах. См. Править в моем сообщении. – tomtom

+0

Хорошо, я посмотрю на это спасибо – bensy