描述html实现自动切换,JS+CSS实现自动切换的网页滑动门菜单效果代码-优快云博客

本文介绍了一款使用JS与CSS实现的自动切换网页滑动门菜单效果，支持最多8个标签，提供了完整的代码示例及在线演示链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码。分享给大家供大家参考。具体如下：

这是一款支持自动切换功能的网页滑动门菜单，JS与CSS结合的技术成果，有人说它是自己会切换的网页选项卡标签面板，QQ登录后弹出的每日要闻迷你窗口中有类似效果，但是代码写法却是截然不同的，每一位作者的思路是不同的，因此您多了一份参考。

运行效果截图如下：

在线演示地址如下：

具体代码如下：

自动切换的网页滑动门菜单

var cur_index=1

var num=4 //该值记录标签的个数

var settime

function GetObj(objName){

if(document.getElementById){

return eval('document.getElementById("' + objName + '")');

}else if(document.layers){

return eval("document.layers['" + objName +"']");

}else{

return eval('document.all.' + objName);

}

function change_Menu(index){

for(var i=1;i<=num;i++){/* 最多支持8个标签 */

if(GetObj("con"+i)&&GetObj("m"+i)){

GetObj("con"+i).style.display = 'none';

GetObj("m"+i).className = "menu"+i+"Off";

}

if(GetObj("con"+index)&&GetObj("m"+index)){

GetObj("con"+index).style.display = 'block';

GetObj("m"+index).className = "menu"+index+"On";

}

cur_index=index

if(cur_index

cur_index++

}

else{

cur_index=1

}

settime=setTimeout("change_Menu(cur_index)",2000)//设置延迟时间

}

function Menu(c_index){

clearTimeout(settime)

change_Menu(c_index)

}

//]]>


自动切换	栏目1		栏目2		栏目3		栏目4

希望本文所述对大家的JavaScript程序设计有所帮助。