집 >웹 프론트엔드 >JS 튜토리얼 >JS는 자동 예약 전환_javascript 기술의 간단한 웹 페이지 탭 효과를 구현합니다.

JS는 자동 예약 전환_javascript 기술의 간단한 웹 페이지 탭 효과를 구현합니다.

WBOY원래의: 2016-05-16 15:36:421287검색

이 기사의 예에서는 JS를 사용한 자동 예약 전환의 간단한 웹페이지 탭 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

간결한 웹페이지 탭입니다. 다른 탭과 달리 이 탭은 탭 내용, 전환 시간 등을 변수에 설정하면 작동을 시작합니다. 마우스 움직임에 대한 반응은 다음과 같습니다. 훨씬 더 좋습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/

구체적인 코드는 다음과 같습니다.

<html>
<head>
<title>自动切换的选项卡</title>
<style>
.tab{width:100px;height:25px;background-color:#ccc;margin:0;padding:0;
border-right:1px solid #666;}
.tab_on{width:100px;height:25px;background-color:#eee;margin:0;padding:0;
border-bottom:1px solid #666;
border-top:1px solid #666;
border-left:1px solid #666;}
#show{
width:200px;
height:100px;
background-color:#eee;
border-bottom:1px solid #666;
border-top:1px solid #666;
border-right:1px solid #666;
line-height:30px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
var n=1;
var time=1000;
var strArr=new Array();
strArr[0]="我们提供";
strArr[1]="高质量脚本下载";
strArr[2]="欢迎光临小站";
strArr[3]="精品网页特效";
function init(){document.getElementById("show").innerHTML = strArr[0];}
function show(){
 n=n>strArr.length&#63;1:n;//如果n>数组长度 则重新赋值为1，以便程序循环
 for(i=1;i<(strArr.length+1);i++){//这里for用来改变当前tab的classname
 if(i==n) document.getElementById("tab_"+i).className = "tab_on";
 else document.getElementById("tab_"+i).className = "tab";
 }
 document.getElementById("show").innerHTML = strArr[n-1];//现实数据
 n++;
}
 setInterval("show()",time);//隔一秒执行一次
//-->
</script>
</head>
<body onload="init()">
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
 <tr>
  <td align="right">
  <div id="tab_1" class="tab_on">ASP</div>
  <div id="tab_2" class="tab" >PHP</div>
  <div id="tab_3" class="tab" >JSP</div>
  <div id="tab_4" class="tab">JAVA</div>
  </td>
  <td bgcolor="#eeeeee">
  <div id="show"></div>
  </td>
 </tr>
</table>
</body>
</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이 되기를 바랍니다.

성명：

이전 기사：Angle.js에서 양방향 바인딩을 구현하는 방법에 대한 간략한 설명 $watch $digest $apply_AngularJS다음 기사：Angle.js에서 양방향 바인딩을 구현하는 방법에 대한 간략한 설명 $watch $digest $apply_AngularJS

JS는 자동 예약 전환_javascript 기술의 간단한 웹 페이지 탭 효과를 구현합니다.

관련 기사