• javascript学习教程之---如何从一个tab切换到banner幻灯片的转换2


    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>tab定时切换</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    
    <body>
    <style>
    #nav_list{ height:25px; width:300px; background:#999;}
    #nav_list div{ float:left; width:100px; line-height:25px; text-align:center;}
    #nav_list div.cur{ background:#C60; color:#fff;}
    
    #nav_con{ width:298px; border:1px solid #999; height:100px;}
    #nav_con div{ display:none;}
    </style>
    <div id="nav_list">
        <div class="cur">tab1</div>
        <div>tab2</div>
        <div>tab3</div>
    </div>
    <div id="nav_con">
        <div style="display:block;">tab1tab1tab1tab1tab1tab1tab1</div>
        <div>tab2tab2tab2tab2tab2tab2tab2</div>
        <div>tab3tab3tab3tab3tab3tab3tab3</div>
    </div>
    
    
    <script type="text/javascript">
        var time;//定义定时器
        var i=-1;//定义开始显示的内容,由于下面执行了i++;所以只能给i赋值-1
        var offset=2000;//设置相隔2秒就切换
        var index_n=$('#nav_list>div').length;//获取切换个数
        var nav_top=$('#nav_list>div');
        var nav_con=$('#nav_list + div>div'); //可以写成var nav_con=$('#nav_con>div')
    
        function roll(){
            i++;
            if(i>index_n){//如果i>切换个数后,重新给i赋值=0
                i=0
            }
            slide(i);
            time=setTimeout(roll,offset);//设置定时器    
        }
        function slide(i){
            nav_top.eq(i).addClass('cur').siblings().removeClass('cur');//把当前的div的高亮
            nav_con.eq(i).show().siblings().hide();    
        }
        
        
        roll();//执行函数
    
    </script>
    </body>
    </html>
  • 相关阅读:
    简单 dp 题选做
    UVa11327
    Codeforces Round #641 (div.2) 题解
    新博客
    数位dp的学习
    stl粗略用法
    cf437C The Child and Toy
    poj1995 Raising Modulo Numbers
    Tarjan的学习
    最短路模板
  • 原文地址:https://www.cnblogs.com/csdttnk/p/3392064.html
Copyright © 2020-2023  润新知