Javascript主页滑块

我正在为一个网站创建一个onclick和一个自动滑块来测试我的JavaScript技能。我有4个（按钮的）图像，当点击时调用一个函数。它将单击的图像更改为其他图像，其他3个图像将成为未单击的按钮。它还会更改（按钮的）图像上方的div。我将4个不同的div堆叠在一起，并用JS改变每个div的可视性。我有这个完美的工作，但我想把我的滑块到下一个水平，有它自动切换从一个div到下一个5秒后。这是我目前的代码

function auto_change() {
if (document.getElementById("option1").style.visibility == 'visible'){
    setTimeout(change_2(),5000);
}
if (document.getElementById("option2").style.visibility == 'visible'){
    setTimeout(change_3(),5000);
}
if (document.getElementById("option3").style.visibility == 'visible'){
    setTimeout(change_4(),5000);
}
if (document.getElementById("option4").style.visibility == 'visible'){
    setTimeout(change_1(),5000);
}
}

 function change_1(x) {
document.getElementById("button1").src = "Images/button_current.png"; 
document.getElementById("button2").src = "Images/button_1.png";
document.getElementById("button3").src = "Images/button_1.png";
document.getElementById("button4").src = "Images/button_1.png";
document.getElementById("option1").style.visibility = 'visible';
document.getElementById("option2").style.visibility = 'hidden';
document.getElementById("option3").style.visibility = 'hidden';
document.getElementById("option4").style.visibility = 'hidden';
auto_change();
 }
 function change_2(x) {
    document.getElementById("button2").src = "Images/button_current.png";
    document.getElementById("button1").src = "Images/button_1.png";
    document.getElementById("button3").src = "Images/button_1.png";
    document.getElementById("button4").src = "Images/button_1.png"; 
    document.getElementById("option1").style.visibility = 'hidden';
    document.getElementById("option2").style.visibility = 'visible';
    document.getElementById("option3").style.visibility = 'hidden';
    document.getElementById("option4").style.visibility = 'hidden';
    auto_change();
  }
  function change_3(x) {

    document.getElementById("button3").src = "Images/button_current.png"; 
    document.getElementById("button1").src = "Images/button_1.png";
    document.getElementById("button2").src = "Images/button_1.png";
    document.getElementById("button4").src = "Images/button_1.png";
    document.getElementById("option1").style.visibility = 'hidden';
    document.getElementById("option2").style.visibility = 'hidden';
    document.getElementById("option3").style.visibility = 'visible';
    document.getElementById("option4").style.visibility = 'hidden';
    auto_change();
   }
   function change_4(x) {

    document.getElementById("button4").src = "Images/button_current.png"; 
    document.getElementById("button1").src = "Images/button_1.png";
    document.getElementById("button2").src = "Images/button_1.png";
    document.getElementById("button3").src = "Images/button_1.png";
    document.getElementById("option1").style.visibility = 'hidden';
    document.getElementById("option2").style.visibility = 'hidden';
    document.getElementById("option3").style.visibility = 'hidden';
    document.getElementById("option4").style.visibility = 'visible';
    auto_change();
 }

---

我的想法是在body标记中有一个onload，它调用auto_change（）。由于id为“option1”的div可见，它将延迟5秒，然后调用change_2（）。然后change_2（）将运行其代码，然后再次调用auto_change（），循环运行缓慢。然而，我似乎无法使自动滑动工作出来，有什么帮助吗

您只需要调用change\u 2 frunction，而不是全部

function auto_change() {
if (document.getElementById("option1").style.visibility == 'visible'){
    setTimeout(change_2(),5000);
}
}

然后在change_2 at last line调用change_3 with timeout，同样的方法是在change_3调用change_4 with timeout和在change_4调用auto_change（）

e、 g

怎么样

var tId,idx=1, max=4; // can be more elegant by counting the buttons
function changeIt() {
  idx++; if (idx>max) idx=1;
  for (var i=1;i<=max;i++) {
    document.getElementById("button"+i).src = (idx==i)?"Images/button_current.png":"Images/button_1.png";
    document.getElementById("option"+i).style.visibility = (idx==i)?'visible':'hidden';
  }
}
window.onload=function() {
  tId=setInterval(changeIt,5000);
} 

var tId，idx=1，max=4；//数一数按钮会更优雅
函数changeIt（）{
idx++；如果（idx>max）idx=1；
对于（var i=1；iTip：使用公共类而不是id和目标元素索引；您可能可以将代码减少到几行。在查看之前，请从您的change_X（）中删除（），因为它们现在都立即执行。然后下一个应该是10000，第三个是15000，依此类推on@elclanrs我可以做到，让代码“漂亮”，但目前我正在努力使代码工作，然后简化代码。是的，我知道更多的工作，但这使我的思考过程更容易。@mplungjan我总是忘记这一点！非常感谢！现在它工作了，我需要记住。我以前遇到过几次这个错误，一直忘记。@Patrick:使代码变得漂亮或更简单。@mplungjanimple不是这个问题的核心。代码行数减少意味着您可以很容易地看到它的逻辑和/或出错的地方。它是编码的一个组成部分，而不是事后进行的润色步骤。
setTimeout（change_25000）
或
setTimeout（function（）{change_2（）}，5000）；
var tId,idx=1, max=4; // can be more elegant by counting the buttons
function changeIt() {
  idx++; if (idx>max) idx=1;
  for (var i=1;i<=max;i++) {
    document.getElementById("button"+i).src = (idx==i)?"Images/button_current.png":"Images/button_1.png";
    document.getElementById("option"+i).style.visibility = (idx==i)?'visible':'hidden';
  }
}
window.onload=function() {
  tId=setInterval(changeIt,5000);
}