这篇文章主要介绍了 js 实现简单选项卡与自动切换效果的方法, 涉及 javascript 操作选项卡与自动切换效果的实现技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现简单选项卡与自动切换效果的方法。分享给大家供大家参考。具体分析如下:
这里再上篇《{aa0aa}》基础上,进一步实现可以自动切换的切换效果,用这种效果就可以做简单的焦点图了。
说明:
设置一个标识数字置为 0,写一个每过几秒标识 + 1, 执行切换效果的函数,然后执行。
当标识超过当前选项卡长度让标识置为 0。
在鼠标移到选项卡的时候关闭定时器,鼠标移走的时候打开定时器。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="gb2312" />
- <title>无标题文档</title>
- <style>
- body,ul,li{
- margin:0;
- padding:0;
- font:12px/1.5 arial;
- }
- ul,li{
- list-style:none;
- }
- .wrap{
- width:500px;
- margin:20px auto;
- }
- .hide{
- display:none;
- }
- #tab_t{
- height:25px;
- border-bottom:1px solid #ccc;
- }
- #tab_t li{
- float:left;
- width:80px;
- height:24px;
- line-height:24px;
- margin:0 4px;
- text-align:center;
- border:1px solid #ccc;
- border-bottom:none;
- background:#f5f5f5;
- cursor:pointer
- }
- #tab_t .act{
- position:relative;
- height:25px;
- margin-bottom:-1px;
- background:#fff;
- }
- #tab_c{
- border:1px solid #ccc;
- border-top:none;
- padding:20px;
- }
- </style>
- <script>
- window.onload = function(){
- tab("tab_t","li","tab_c","div","onmouseover")
- function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
- var tab_t = document.getElementById(tab_t);
- var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
- var tab_c = document.getElementById(tab_c);
- var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
- var len = tab_t_li.length;
- var i=0;
- var timer = null;
- var num=0;
- for(i=0; i<len; i++){
- tab_t_li[i].index = i;
- tab_t_li[i][evt] = function(){
- clearInterval(timer);
- num = this.index;
- tab_change()
- }
- tab_t_li[i].onmouseout = function(){
- autoplay();
- }
- }
- function tab_change(){
- for(i=0; i<len; i++){
- tab_t_li[i].className = '';
- tab_c_li[i].className = 'hide';
- }
- tab_t_li[num].className = 'act';
- tab_c_li[num].className = '';
- }
- function autoplay(){
- timer = setInterval(function(){
- num++;
- if(num>=len) num=0;
- tab_change();
- },1000);
- }
- autoplay();
- }
- }
- </script>
- </head>
- <body>
- <div class="wrap">
- <ul id="tab_t">
- <li class="act">选择1</li>
- <li>选择2</li>
- <li>选择3</li>
- <li>选择4</li>
- </ul>
- <div id="tab_c">
- <div>内容1</div>
- <div class="hide">内容2</div>
- <div class="hide">内容3</div>
- <div class="hide">内容4</div>
- </div>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: