Javascript 主页滑块
Javascript Home Page Slider
本文关键字:主页 Javascript 更新时间:2023-09-26
我正在为一个网站创建一个onclick和一个自动滑块来测试我的JavaScript技能。我有 4 张(按钮)图像,单击时会调用函数。它将单击的图像更改为其他图像,其他 3 个图像成为未单击的按钮。它还更改图像(按钮)上方的div。我通过将 4 个不同的div 堆叠在一起并使用 JS 更改每个div 的可见性来做到这一点。我的工作非常完美,但我想将我的滑块提升到一个新的水平,让它在 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();
}
我的想法是在调用 auto_change() 的 body 标签中加载一个。由于 id 为"option1"的div 是可见的,它将延迟 5 秒,然后调用 change_2()。然后 change_2() 将运行其代码,然后再次调用 auto_change(),然后运行缓慢循环。但是,我似乎无法使自动滑动工作,有什么帮助吗?
你只需要称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()
例如
function change_2(x) {
//YOUR NORMAL CODE HERE AND ON LAST LINE
setTimeout("change_3();",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);
}
相关文章:
- 如何在只能有一个asp.net表单的主页上从asp.net页面中的javascript中获取值
- 谷歌上的JavaScript'的主页
- 如何在主页的弹出窗口中从向导中的用户控制中获取ControlToValidate ID-javascript asp.n
- JavaScript滑块在Magento主页上不起作用
- Wordpress小部件中的Javascript仅适用于主页
- ESRI 自定义主页按钮 GIS JavaScript
- 使用bootstrap,jquery和javascript创建一个动态主页
- Javascript/AJAX适用于主页,但不适用于辅助页面
- 当将页面提交到谷歌表单时,它将打印结果,然后使用 javascript 重定向到主页
- 糟糕的JavaScript?你好酒吧独奏只在主页上工作 - 没有其他页面
- 检测 iOS 相对于 JavaScript 中主页按钮的方向
- Javascript window.open 也会更改主页
- Javascript 主页滑块
- javascript 如何转到主页,联机和脱机(本地硬盘)
- 在主页加载之前,我需要来自javascript的值,然后想在代码中使用该值
- JavaScript FileReader 滞后于我的主页,但不在 JSBin 上
- Javascript函数在主页面或新窗口上打开URL
- 如果用户使用纯Javascript访问特定的登录页,如何更改主页URL
- 使用asp主页的javascript放在哪里
- 下载一个由javascript生成POST参数的主页