我正在为网站创建一个onclick和一个自动滑块来测试我的JavaScript技能。我有4个图像(按钮),点击时调用一个函数。它将单击的图像更改为不同的图像,其他3个图像成为未单击的按钮。它还会更改图像(按钮)上方的div。我通过将4个不同的div堆叠在一起并用JS改变每个的可见性来实现这一点。我有这个完美的工作,但我想把我的滑块提升到一个新的水平,让它在5秒后自动从一个div切换到下一个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();
}
我的想法是在body标签中调用auto_change()。由于id为“option1”的div是可见的,它将延迟5秒,然后调用change_2()。然后change_2()将运行其代码,然后再次调用auto_change()并运行慢速循环。但是,我似乎无法使自动滑动工作,任何帮助?
答案 0 :(得分:0)
你只需要调用change_2 frunction而不是所有
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()
e.g。
function change_2(x) {
//YOUR NORMAL CODE HERE AND ON LAST LINE
setTimeout("change_3();",5000);
}
答案 1 :(得分: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);
}