JS對於導航欄、下拉菜單以及選項卡的切換操作、大圖輪播（主要練習對於樣式表的操作）

本文轉載自查看原文 2017-03-31 19:25 1897

1、導航攔以及下拉菜單

css樣式表代碼

.div1 {
    width: 100px;
    height: 30px;
    background-color: red;
    float: left;
    margin-right: 10px;
}

.div1-div {
    width: 100%;
    height: 400px;
    background-color: green;
    margin-top: 30px;
    display: none;
}

JS腳本代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css3.css" rel="stylesheet" />
</head>
<body>
    <div class="div1">
        <div class="div1-div"></div>
    </div>
    <div class="div1">
        <div class="div1-div"></div>
    </div>
    <div class="div1">
        <div class="div1-div"></div>
    </div>
    <div class="div1">
        <div class="div1-div"></div>
    </div>
    <div class="div1">
        <div class="div1-div"></div>
    </div>
    <div class="div1">
        <div class="div1-div"></div>
    </div>
</body>
</html>

<script type="text/javascript">
    var oDiv1s = document.getElementsByClassName('div1');
    var oDiv2s = document.getElementsByClassName('div1-div');

    for (var i = 0; i < oDiv1s.length; i++) {
        oDiv1s[i].index = i;

        oDiv1s[i].onmouseover = function () {
            this.style.backgroundColor = "blue";
            oDiv2s[this.index].style.display = "block";
        }

        oDiv1s[i].onmouseout = function () {
            this.style.backgroundColor = "red";
            oDiv2s[this.index].style.display = "none";
        }
    }






</script>

執行結果如下：

注意：當鼠標放在紅色區域紅色區域（也就是導航欄）會變藍色並且會彈出出相應的下拉菜單（控制下來菜單的是display=block\none）

2、選項卡的操作

CSS樣式表代碼

.div1 {
    width: 100px;
    height: 30px;
    background-color: green;
    float: left;
    margin-right: 10px;
}

.div2 {
    position:absolute;
    top:43px;
    width: 650px;
    height: 300px;
    background-color: pink;
    z-index:100;
}

JS腳本代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/css4.css" rel="stylesheet" />
</head>
<body>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div1"></div>
    <div class="div2" style="z-index:101;">111111</div>
    <div class="div2">222222</div>
    <div class="div2">333333</div>
    <div class="div2">444444</div>
    <div class="div2">555555</div>
    <div class="div2">666666</div>
</body>
</html>
<script type="text/javascript">
    var oDiv1s = document.getElementsByClassName('div1');
    var oDiv2s = document.getElementsByClassName('div2');
    var zind = 102;

    for (var i = 0; i < oDiv1s.length; i++) {
        oDiv1s[i].index = i;
        //點擊事件
        oDiv1s[i].onclick = function () {
            for (var j = 0; j < oDiv1s.length; j++) {
                oDiv1s[j].style.backgroundColor = "green";
            }
            this.style.backgroundColor = "red";

            //選項卡切換代碼
            oDiv2s[this.index].style.zIndex = zind;
            zind++;

        }

        //移入事件
        oDiv1s[i].onmouseover = function () {
            if (this.style.backgroundColor != "red") {
                this.style.backgroundColor = "blue";
            }
        }

        //移出事件
        oDiv1s[i].onmouseout = function () {
            if (this.style.backgroundColor == 'blue') {
                this.style.backgroundColor = "green";
            }
        }
    }



</script>

執行結果如下：

注意：當用戶點擊綠色部分會變紅同時下面的粉色部分也會跟着切換；但是是點擊那個那個變紅其他的不變

3、大圖輪播

css樣式表代碼

.imgboss {
    position: relative;
    width: 400px;
    height: 226px;
    background-color: red;
}

    .imgboss img {
        position: absolute;
        width: 100%;
        height: 100%;
        display: none;
    }

.btn_img {
    width: 30px;
    height: 60px;
    background-color: #e0e0e0;
    position: absolute;
    z-index: 1000;
    top: 50%;
    margin-top: -30px;
    text-align: center;
    line-height: 60px;
    font-size: 33px;
    font-weight: bold;
    cursor: pointer;
}

JS 腳本代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/css5.css" rel="stylesheet" />
</head>
<body>

    <div class="imgboss">
        <img class="img_item" src="img/dota_img1.jpg" style="display: block;" />
        <img class="img_item" src="img/dota_img2.jpg" />
        <img class="img_item" src="img/dota_img3.jpg" />
        <img class="img_item" src="img/dota_img4.jpg" />
        <img class="img_item" src="img/dota_img5.jpg" />

        <div class="btn_img" id="btn_left"><</div>
        <div class="btn_img" id="btn_right" style="right: 0px;">></div>
    </div>


</body>
</html>
<script type="text/javascript">
    var count = 0;
    var oImgs = document.getElementsByClassName("img_item");

    document.getElementById("btn_left").onclick = function () {
        move(0);
    }

    document.getElementById("btn_right").onclick = function () {
        move(1);
    }

    function move(a)
    {
        for (var i = 0; i < oImgs.length; i++) {
            oImgs[i].style.display = "none";
        }

        if (a == 0) {
            count--;
            if (count < 0) {
                count = oImgs.length - 1;
            }
        }
        else {
            count++;
            if (count > (oImgs.length - 1)) {
                count = 0;
            }
        }

        oImgs[count].style.display = "block";
    }



</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS案例-狀態欄/導航欄/選項卡切換 HTML DOM部分---做豎向橫向的下拉導航下拉菜單圖片輪播（圓點、箭頭）選項卡進度條；自動點擊切換按鈕切換輪播無縫選項卡 ----原生js mui輪播組件，滑動選項卡、導航內容相互切換 Ionic Js二十：選項卡欄操作 JS實現選項卡切換 js練習導航欄下拉子菜單原生js實現選項卡樣式切換的幾種方式。筆記3：uni-app可拖動頂部選項卡切換導航欄scroll-view可滾動視圖區域原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等