Radio Button Слайд-шоу

Question

В настоящее время у меня есть слайд-шоу для моего сайта, и я пытаюсь прокрутить каждый переключатель. Я пытался сделать это несколькими способами, но ничего не работает. может кто-нибудь помочь пожалуйста.

вот мой код:

/*This function is called when the window is done loading*/ 
window.onload = function() { 

//Each of these buttons should call the Change Image Function, passing a differet parameter. 
document.getElementById("button1").onclick = function(){ 
    changeImage("formbackground1.jpg"); 
    } 

document.getElementById("button2").onclick = function(){ 
    changeImage("formbackground2.jpg"); 
    } 

document.getElementById("button3").onclick = function(){ 
     changeImage("background2.jpg"); 
    } 

} 

var step=1 
function slideit() { 
     document.images.slide.src=eval(document.getElementById("button"+step).onclick) 
    if (step < 3){ 
    step++ 
} 
else{ 
    step = 1 
    setTimeout("slideit()", 2500) 
} 
    slideit(); 
} 



/*This function changes the picture when one of the 3 buttons is pressed*/ 
function changeImage(source) { 

    document.getElementById("myImage").src=source; 
} 


function popup(){ 

} 

Answer 1

Вместо использования setTimeout() я использовал setInterval() вместо этого.

var slideTimer = setInterval(slideIt, 3000); 

С setInterval(), мы можем назвать clearInterval() на функции для того, чтобы остановить его от выполнения. Это предотвращает переключение слайд-шоу на следующее изображение сразу после нажатия пользователем определенного изображения.

document.getElementById("button1").onclick = function(){ 
    clearInterval(slideTimer); 
    slideTimer = setInterval(slideIt, 3000); 
    changeImage("background1.jpg"); 
} 

document.getElementById("button2").onclick = function(){ 
    clearInterval(slideTimer); 
    slideTimer = setInterval(slideIt, 3000); 
    changeImage("background2.jpg"); 
} 

document.getElementById("button3").onclick = function(){ 
    clearInterval(slideTimer); 
    slideTimer = setInterval(slideIt, 3000); 
    changeImage("background3.jpg"); 

} 

В slideIt() функция проверяет, которая в данный момент выбран переключатель, а затем выбирает следующую кнопку радио и слайд-шоу изображение. Эта проверка происходит каждые 3 секунды из-за setInterval(slideIt, 3000).

function slideIt() { 
    if (document.getElementById('button1').checked == true) { 
      document.getElementById('button2').click(); 
      changeImage("background2.jpg"); 
     } 
     else if (document.getElementById('button2').checked == true) { 
      document.getElementById('button3').click(); 
      changeImage("background3.jpg"); 
     } 
     else if (document.getElementById('button3').checked == true) { 
      document.getElementById('button1').click(); 
      changeImage("background1.jpg"); 
     } 
     else { 
      //do nothing 
     } 
} 

живой пример: https://jsfiddle.net/kkdaily/oLed4em1/