WebGL_0012：三维讲解导航模板 Icon方式

1，

css样式

    /* 导航主按钮 模板2 */

    .iconElement {
        width: 50%;
        /* 高度等于 这个元素的宽度 * li元素的宽度 */
        height: 2vw;
        text-align: center;
        display: inline-block;
        position: absolute;
        transform: translate(-50%,50%);
        bottom: 7%;
        left: 50%; 
        /* background-color: red; */
    }

    .iconElement ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        /* background-color: yellow; */
    }

    .iconElement ul li {
        display: inline-block;
        width: 4%;
        height: 0;
        padding: 4% 0 0;
        /* 设置icon之间的间距 */
        margin: 0 5%;
        /* background-color: seagreen; */
        pointer-events: auto;
    }

    .icon0 {
        background-image: url("public/imgs/ui/iconN.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .icon0.active {
        background-image: url("public/imgs/ui/iconA.png");
    }

    .icon1 {
        background-image: url("public/imgs/ui/iconN.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .icon1.active {
        background-image: url("public/imgs/ui/iconA.png");
    }

    .icon2 {
        background-image: url("public/imgs/ui/iconN.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .icon2.active {
        background-image: url("public/imgs/ui/iconA.png");
    }

    .icon3 {
        background-image: url("public/imgs/ui/iconN.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
    .icon3.active {
        background-image: url("public/imgs/ui/iconA.png");
    }

 

2，html代码

<!-- 主导航按钮模板2 -->
<div class="PagebutDiv" style="display: block; ">
    <div class="leftButton" id="leftBtn" ondragstart="return!1" oncontextmenu="return!1" onselectstart="return!1"></div>
    <div class="iconElement pointEvtN">
        <ul class="icon" id="icons">
            <li class="iconBut active icon0" data="0"></li>
            <li class="iconBut icon1" data="1"></li>
            <li class="iconBut icon2" data="2"></li>
            <li class="iconBut icon3" data="3"></li>
        </ul>
    </div>
    <div class="rightButton" id="rightBtn" ondragstart="return!1" oncontextmenu="return!1" onselectstart="return!1"></div>
</div>

 

JS代码

// 模板2左右按钮点击响应事件
UieventControl.prototype.changePage2 = function(e) {
    if (canclick) {
        console.log("112232");
        //通过click获取对象的ID
        "rightBtn" === e.currentTarget.id ? currentPage++ : currentPage--;
        totalPage < currentPage ? currentPage = 0 : currentPage < 0 && (currentPage = totalPage);
        // 修改按钮样式
        PageButID = "icon" + currentPage;
        console.log(PageButID);
        $addAcByID(".iconBut", PageButID);
    }
};