自动切换选项卡js效果

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自动切换选项卡</title>
<style type="text/css">
*{list-style:none;margin:0;padding:0;overflow:hidden}
.tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;}
.menu{width:400px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}
li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden}
.menudiv{width:399px;height:300px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
.off{background:#E0E2EB;color:#336699;font-weight:bold}
</style>
<script type="text/javascript">
function setTab(name,cursel){
    cursel_0=cursel;
    for(var i=1; i<=links_len; i++){
        var menu = document.getElementById(name+i);
        var menudiv = document.getElementById("con_"+name+"_"+i);
        if(i==cursel){
            menu.className="off";
            menudiv.style.display="block";
        }
        else{
            menu.className="";
            menudiv.style.display="none";
        }
    }
}
function Next(){
    cursel_0++;
    if (cursel_0>links_len)cursel_0=1
    setTab(name_0,cursel_0);
}
var name_0='one';
var cursel_0=1;
var ScrollTime=3000;//循环周期（毫秒）
var links_len,iIntervalId;
onload=function(){
    var links = document.getElementById("tab1").getElementsByTagName('li')
    links_len=links.length;
    for(var i=0; i<links_len; i++){
        links[i].onmouseover=function(){
            clearInterval(iIntervalId);
            this.onmouseout=function(){
                iIntervalId = setInterval(Next,ScrollTime);;
            }
        }
    }
    document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
        clearInterval(iIntervalId);
        this.onmouseout=function(){
            iIntervalId = setInterval(Next,ScrollTime);;
        }
    }
    setTab(name_0,cursel_0);
    iIntervalId = setInterval(Next,ScrollTime);
}
</script>
</head>
<body>
<div class="tab1" id="tab1">
    <div class="menu">
        <ul>
            <li id="one1" onclick="setTab('one',1)">欢迎</li>
            <li id="one2" onclick="setTab('one',2)">新闻</li>
            <li id="one3" onclick="setTab('one',3)">介绍</li>
            <li id="one4" onclick="setTab('one',4)">祝福</li>
        </ul>
    </div>
    <div class="menudiv">
    <div id="con_one_1"><h4 style="color:red">欢迎你来到我们的网站，JS效果大全欢迎您~</h4></div>
    <div id="con_one_2" style="display:none;"><h4 style="color:red">新闻1+1，快乐属于您</h4></div>
    <div id="con_one_3" style="display:none;"><h4 style="color:red">会自动切换的选项卡，很不错。</h4></div>
    <div id="con_one_4" style="display:none;"><h4 style="color:red">希望再来再见！</h4></div>
    </div>
</div>
</body>

 

 

 jQuery实现的tab标签自动切换效果

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现的tab标签自动切换效果</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
dl {
 margin:10px auto;
 width:500px;
 line-height:24px;
 border-left:1px solid #dcdcdc;
}
dt.active {
 border-bottom:1px solid #fff;
 position:relative;
}
dt {
 padding:0 10px;
 float:left;
 border:1px solid #dcdcdc;
 border-left:0;
 cursor:pointer;
 margin-bottom:-1px;
}
dd {
 clear:both;
 width:100%;
 border-left:0;
 border:1px solid #dcdcdc;
 border-left:0;
 display:none;
}
</style>
</head>
<body>
<dl>
  <dt>nav1</dt>
  <dt>nav2</dt>
  <dt>nav3</dt>
  <dd>1111111111111111111111</dd>
  <dd>　2222222222222222222222</dd>
  <dd>　　3333333333333333333333</dd>
</dl>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('dt:first').addClass('active');
 $('dd:first').css('display','block');
 autoroll();
 hookThumb();
});
var i=-1; //第i+1个tab开始
var offset = 2500; //轮换时间
var timer = null;
function autoroll(){
 n = $('dt').length-1;
 i++;
 if(i > n){
 i = 0;
 }
 slide(i);
    timer = window.setTimeout(autoroll, offset);
 }
function slide(i){
 $('dt').eq(i).addClass('active').siblings().removeClass('active');
 $('dd').eq(i).css('display','block').siblings('dd').css('display','none');
 
 }
function hookThumb(){    
 $('dt').hover(
  function () {
    if (timer) {
                clearTimeout(timer);
    i = $(this).prevAll().length;
             slide(i); 
            }
  },
  function () {
      
            timer = window.setTimeout(autoroll, offset);  
            this.blur();            
            return false;
  }
); 
}
</script>
</body>
</html>

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body { background-color:#FFF; font:12px/21px Arial; margin:3em; }
h3 { font-size:16px; margin:0 0 1em; }
.tags { height:38px; list-style:none outside none; margin:0 0 -1px; padding:0; position:relative; }
.tags li { background-color:#EAEAEF; border:1px solid #DDD; cursor:pointer; float:left; margin-right:6px; }
.tags li a { color:#36C; display:block; line-height:36px; padding:0 1em; text-decoration:none; }
.tags li.current { background-color:#FFF; border-bottom-style:none; font-weight:700; height:37px; }
.tags li.current a { color:#C63; outline:0; }
.panes { border:1px solid #DDD; height:5em; margin-bottom:2em; padding:1em; }
</style>
</head>

<body>




        <h3>鼠标单击</h3>
        <div class="tabs">
          <ul class="tags">
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Prototype</a></li>
            <li><a href="#">MooTools</a></li>
          </ul>
          <div class="panes">
            <div>Hello JQuery!</div>
            <div>Hello Prototype!</div>
            <div>Hello MooTools!</div>
          </div>
        </div>
        <h3>鼠标划过</h3>
        <div class="tabs2">
          <ul class="tags">
            <li><a href="#">JQuery</a></li>
            <li><a href="#">Prototype</a></li>
            <li><a href="#">MooTools</a></li>
          </ul>
          <div class="panes">
            <div>Hello JQuery!</div>
            <div>Hello Prototype!</div>
            <div>Hello MooTools!</div>
          </div>
        </div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
        $.fn.extend({
            // Tabs 插件名称
            oTabs: function(options) {
                // 默认值
                var defaults = {
                    dft: 0,
                    // 默认起始显示序列
                    act: "click" // 默认鼠标件事
                };
                // 合并 defaults 和 options 修改并返回 defaults
                var options = $.extend(defaults, options);
         
                // this 指通过当前选择器获取的 jQuery 对象
                // 选项卡标签
                var tag = $(".tags > li", this);
                // 选项卡内容
                var pane = $(".panes > div", this);
         
                // 起始显示标签
                tag.eq(options.dft).addClass("current");
                // 起始显示内容
                pane.eq(options.dft).show().siblings().hide();
         
                // 选项卡切换方法
                function fnTabs() {
                    $(this).addClass("current").siblings().removeClass("current");
                    pane.eq($(this).index()).show().siblings().hide();
                    return false;
                };
         
                // 判断是否鼠标划过，默认为鼠标点击
                if (options.act == "mouseover") {
                    tag.mouseover(fnTabs);
                    tag.click(function() {
                        return false;
                    });
                } else {
                    tag.click(fnTabs);
                }
            }
        });
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".tabs").oTabs();
    $(".tabs2").oTabs({
        dft: 1, // 设置起始显示序列，默认为第一页
        act: "mouseover" // 设置鼠标件事,默认为鼠标单击
    });
});
</script>
</body>
</html>

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery实现的tab标签自动切换效果</title>

<style type="text/css">

* {margin:0;padding:0;}

.main{margin:10px auto;width:500px; line-height:24px;border-left:1px solid #dcdcdc;}.nav{height:20px;line-height:20px;width:500px;}

.nav span.active {border-bottom:1px solid #fff;position:relative;}

.nav span{padding:0 10px;float:left;border:1px solid #dcdcdc;border-left:0;cursor:pointer;margin-bottom:-1px;}

.sho{clear:both;width:500px;border-left:0;border:1px solid #dcdcdc;border-left:0;display:none;height:200px;}

</style>

</head>

<body>

<div class="main">

    <div class="nav">

        <span>nav1</span>

        <span>nav2</span>

        <span>nav3</span>

    </div>

    <div class="sho">1111111111111111111111</div>

    <div class="sho">2222222222222222222222</div>

    <div class="sho">3333333333333333333333</div>

</div>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>

<script type="text/javascript">

    $(document).ready(function(){

        $('.nav span:first').addClass('active');

        $('.sho:first').css('display','block');

        autoroll();

        hookThumb();

    });

    var i=-1; //第i+1个tab开始

    var offset = 2500; //轮换时间

    var timer = null;

    function autoroll(){

        n = $('.nav span').length-1;

        i++;

        if(i > n){

            i = 0;

        }

        slide(i);

            timer = window.setTimeout(autoroll, offset);

    }

    function slide(i){

        $('.nav span').eq(i).addClass('active').siblings().removeClass('active');

        $('.sho').eq(i).css('display','block').siblings('.sho').css('display','none');

    }

    function hookThumb(){    

    $('.nav span').hover(

        function () {

            if (timer) {

                clearTimeout(timer);

                i = $(this).prevAll().length;

                slide(i);

                }

            },

        function () {      

            timer = window.setTimeout(autoroll, offset);  

            this.blur();            

            return false;

        }

        );

    }

</script>

</body>

</html>

 

 

posted @ 2012-05-25 17:15  赵小磊  阅读(1070)  评论(0)    收藏  举报
回到头部