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/

单选按钮幻灯片

1 个答案: