js Tab切換實例

時間 2019-11-16

標籤 tab 切換實例欄目 JavaScript 简体版

原文原文鏈接

js 實現 tab 切換javascript

實現以下效果：css

一、圖片每1秒鐘切換1次。html

二、當鼠標停留在整個頁面上時，圖片不進行輪播。java

三、當點擊切換頁的選項上時，出現該選項的對應圖片，並且切換頁選項的背景顏色發生相應的變化。ide

四、當圖片發生輪播切換時，在不點擊選項卡的前提下，相應的選項卡背景顏色也自動發生變化。函數

效果圖以下：網站

index.html文件this

<!DOCTYPE html>
<html>
<head>
    <title>js導航輪播</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="main" id="main">
    <div class="nav">
        <ul  id="ul">
            <li id="0">首頁</li>
            <li id="1">點擊看看</li>
            <li id="2">會自動的</li>
            <li id="3">個人網站</li>
        </ul>
    </div>
    <div class="banner" id="banner">
        <a href=""><img src="img/1.jpg" class="banner-slide"/></a>
        <a href=""><img src="img/3.jpg" class="banner-slide"/></a>
        <a href=""><img src="img/4.jpg" class="banner-slide"/></a>
        <a href=""><img src="img/5.jpg" class="banner-slide"/></a>
    </div>
</div>
</body>
</html>

style.css文件spa

*{margin: 0;padding: 0;}
/*導航菜單*/
body{font-family: "Microsoft YaHei";}
.main{width:602px;height:263px;margin: 20px auto;overflow: hidden;}
.nav ul{width: 600px;overflow: hidden;border: 1px solid #f3f3f3;border-bottom: #fc0;}
.nav ul li{float: left;list-style: none;width: 150px;text-align: center;background-color: #fff;padding: 5px 0;border-radius: 5px;cursor: pointer;}
.nav ul .active{background-color: #fc0;font-weight: bold;cursor: pointer;}
/*輪播圖*/
.banner{width:602px;overflow: hidden;position: relative;}
img{width: 100%;}
img .banner-slide{vertical-align: bottom;position: absolute;display: none;}

script.js文件code

//封裝一個代替getElementById()的方法
function $(id){
    return typeof(id) === "string"?document.getElementById(id):id;
}

window.onload=function(){
var index = 0,
    timer = null,
    titles = $("ul").getElementsByTagName("li"),
    pics = $("banner").getElementsByTagName("img"),
    len = pics.length;
    //初始狀態設置
    titles[0].className="active";
    pics[0].style.display='block';

//封裝一個切換的tab函數    
function tab(){
    //鼠標滑過是清除定時器
    $("main").onmouseover=function(){
        if(timer) {clearInterval(timer);}
    }
    //鼠標滑出時繼續自動切換
    $("main").onmouseout=function(){timer = setInterval(autoPlay,1000);}

    //遍歷li，點擊li時跳轉到相應頁面，而且li樣式隨之改變
    for(var i=0;i<len;i++){
        titles[i].id=i;        
        titles[i].onclick=function(){
            clearInterval(timer);
            changeOption(this.id);
        }
        $("main").onmouseout=function(){
                   timer = setInterval(autoPlay,1000);
        }
    }

    if(timer){
        clearInterval(timer);
        timer=null;
    }
        //添加定時器，實現每隔一秒自動切換
        timer = setInterval(autoPlay,1000);


//封裝autoPlay自動切換函數
        function autoPlay(){
            index++;
            if(index >= len){
                index = 0;
            }
          changeOption(index);
        }
//封裝changeOption函數
    function changeOption(curIndex){
            for (var j=0;j<len;j++) {
            titles[j].className='';
            pics[j].style.display='none';
        }
        titles[curIndex].className="active";
        pics[curIndex].style.display='block';
        index=curIndex;
    }
}
tab();

}

相關標籤/搜索

每日一句

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