單選按鈕幻燈片

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()檢查，然後選擇下一個單選按鈕和幻燈片播放圖像。由於setInterval(slideIt, 3000)，此檢查每3秒發生一次。

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/