javascript學習教程之---如何從一個tab切換到banner幻燈片的轉換2

時間 2019-11-11

標籤 javascript 學習教程如何一個 tab 切換 banner 幻燈片轉換欄目 JavaScript 简体版

原文原文鏈接

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。