单选按钮幻灯片

Radio Button Slideshow

本文关键字：幻灯片 单选按钮      更新时间：2023-09-26

我的网站目前有一个幻灯片，我正在尝试循环浏览每个单选按钮。我尝试了多种方法，但似乎都不起作用。有人能帮忙吗。

这是我的代码：

/*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(){
}

我没有使用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/

相关文章：