0

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

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();
 }

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

4

2 回答 2

0

您只需要调用 change_2 函数而不是全部

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

然后在最后一行的change_2中调用change_3超时，同样的方式在change_3调用change_4超时和在change_4调用auto_change（）

例如

function change_2(x) {
    //YOUR NORMAL CODE HERE AND ON LAST LINE

    setTimeout("change_3();",5000);
  }
于 2013-09-28T05:07:22.933 回答
0

怎么样

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);
}
于 2013-09-28T05:41:21.067 回答