体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

l老师，请检查下代码。

来源：5-3 二级菜单展开效果

流下了没有技术的眼泪

2020-03-31 23:22:12

index.css
*{
    margin: 0;
}
@font-face{
    font-family: "iconfont";
    src:url("../img/font/iconfont.eot");
    src:url("../img/font/iconfont.eot"); format("embedded-opentype"),
        url("../img/font/iconfont.woff"); format("woff"),
        url("../img/font/iconfont.ttf");    format("truetype")
        url("../img/font/iconfont.svg#iconfong");  format("svg") ;
}
ul{
    list-style: none;
}
a:link,a:visited{
    text-decoration: none;
}
body{
    font-family: "微软雅黑";
    color: #11419e; 
}
.main{
    width: 1200px;
    height: 460px;
    margin: 300px auto;
    /*相对定位*/
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
}
.banner-silde{
    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
}
.slide-active{
    display:block;
}

.slide1{
    background-image:url(../img/bg1.jpg);
}

.slide2{
    background-image:url(../img/bg2.jpg);
}

.slide3{
    background-image:url(../img/bg3.jpg);
}

.button{
    /*绝对定位*/
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    top: 50px;
    margin-top: -40px;
    background: url(img/arrow.png) no-repeat center center;

}
.button:hover{
    opacity: 0.8;
    filter: alpha(opacity=80);

}

.prev{
    transition: rotate(180deg);
}
.next{
    left: auto;
    right: 0;
}
.dots{
    position: absolute;
    bottom: 24px;
    text-align: right;
    right: 10px;

}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background-color: rgba(7,17,27,0.4);
    box-shadow:0 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-left: 8px;
    cursor: pointer;
}
.dots span.sctive{
    box-shadow:0 0 0 0 2px  rgba(7,17,27,0.4) inset;
    background-color: #fff;
}

/*导航菜单*/
.menu-box{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0px;
    top: 0;
    background:rgba(7,17,27,0.5); 
    opacity: 0.5;
    z-index: 1;
}
.menu-content{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0px;
    left: 0px;
    top: 0;
    z-index: 2;
    padding-top: 6px;
}
.menu-item{
    height: 64px;
    line-height: 66px;
    font-size: 16px;
    padding: 0 24px;
    /*相对定位*/
    position: relative;

}
/*.menu-item a:link, .menu-item a:visited{
    color#fff;
    border-bottom: 1px  solid rgba(255,255,255,0.2)
    padding0 8px;
}*/

.menu-item a:link, .menu-item a:visited{
    color:#fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 8px;
}
.menu-item i{
    position: absolute;
    right: 32px;
    font-size: 24px;
    top: 2px;
    font-family: "iconfont";
    font-style: normal;
    font-weight: normal;
}
.sub-menu{
    width: 730px;
    height: 458px;
    border:1px solid #d9dde1;
    background:#fff;
    position: absolute;
    left: 244px;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
.inner-box{
    width: 100%;
    height: 100%;
    background:url(../img/fe.png) no-repeat;
    display: none;
}
.sub-inner-box{
    width: 652px;
    overflow: hidden;

}
.sub-row{
    margin-bottom: 25px;

}
.title{
    color: #f01414;
    font-size: 16px;
    margin: 28px 0 30px 0;

}
.bold{
    font-weight:bold;
}
.mr10{
    margin-right: 10px;
}
.ml10{
    margin-left: 10px;
}
.hide{
    display: none;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="main" id="main">
        <div class="menu-box"></div>
        <!-- 子菜单 -->
        <dic class="sub-menu hide" id="sub-menu">
            <!-- 手机配件 -->
                <div class="iner-box">
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <!-- hang -->
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                </div>
            </div>
            <!-- 电脑 -->
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <!-- hang -->
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                </div>
            
            <!-- 家用电器 -->   
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <!-- hang -->
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                </div>
        
            <!-- 家具 -->
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <!-- hang -->
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10" >手机通讯:</span>
                        <a href="#">手机</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">手机维修</a>
                        <span class="mar10 ml10">/</span>
                        <a href="#">以旧换新</a>
                        <span class="mar10 ml10">/</span>
                    </div>
                </div>
        </dic>
        <!-- 主菜单 -->
        <div class="menu-content" id="menu-content">
            <div class="menu-item">
                <a href="">
                    <span>手机</span>
                    <i>&#x665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>手机</span>
                    <i>&#x665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>手机</span>
                    <i>&#x665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>手机</span>
                    <i>&#x665;</i>
                </a>
            </div>
            <div class="menu-item">
                <a href="">
                    <span>手机</span>
                    <i>&#x665;</i>
                </a>
            </div>
        </div>
        <!-- 图片轮播 -->
        <div class="banner">
            <a href="">
                <div class="banner-slide slide1 slide-active"></div>
            </a>
            <a href="">
                <div class="banner-slide slide2"></div>
            </a>
            <a href="">
                <div class="banner-slide slide3"></div>
            </a>
        </div>
        <!-- 上一张，下一章按钮 -->
        <a href="javascript:void(0) class="button prev" id="prev"></a>
        <a href="javascript:void(0) class="button next" id="next"></a>
        <!-- 圆点导航 -->
        <div class="dots">
            <span class="active"></span>
            <span> </span>
            <span></span>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>
index.js
// 封装一个代替getElementById()的方法
function byId(id){
     return typeof(id) ==="string"?document.getElementById(id):id;
}
//全局变量
var index = 0,
    timer =  null;
    banner = byId("banner").getElementByTagName("div");
    dots =byId
    prev = byId("prev");
    next = byId("next");
    len = pics.length;
    menu = byId("menu-content");
    subMenu =byId("sub-menu");
    // getElementsByClassName ie8不支持
    innerBox = subMenu.getElementByTagName("inner-box");
    menuItems = menu.getElementsByClassName("menu-item");

function slideTmg(){
    var main =byId("main");
        //划过清除定时器，离开继续
        main.onmouseover =function(){
            //划过清除定时器
            if(timer) clearinteral(timer);
        }
        main.onmouseout =function(){
            timer =setInterval(function){
                index++; //leng = 3 0 1 2
                if(index >= len){
                    index = 0;
                }
                //切换图片
                changeImg;
            },3000);
        }
        // 自动在mian上触发鼠标离开事件
    main.onmouseout();
    //便利所有点击，且绑定点击事件，点击圆点切图片
    for(var d=0;d<len;d++){
        //给所有的span天价烟ongoin一个id属性，值为d，作为当前span的索引
        dots[d].id=d;
        dots[d].onclick = function(){
            // 改变index当前span的值
            alert(this.id);

            //调用changeimhg，实现切换图片
            changeImg();
        // dots[d].onclik= function();
        // //改变index为span的索引
        }
    }
    //下一张，递增
    next.onclick = function(){
        index++;
        if(index >=len )index=0;
        changeImg();
    }
    //上一张，递减
    prev.onclick =function(){
        index--;
        if(index <0  )index = len-1;
        changeImg();
    }
    //导航菜单
    //遍历主菜单，且绑定时间
    for(var m=0;m<menuItems.length;m++){
        //每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover =function(){
            var idx = this.getAttribute("data-index");
            subMenu.className = "sub-menu"; 
            innerBox[idx];
        }
    }
}
function changeImg(){
    //遍历banner下多有的div及dots下的所有哦span，将div，将其span显示
    for(var i=0;i<len;i++){
        pics[i].style.dispaly="none";
        dots[i].className ="active";
    }
    // 根据index的索引找到当前的div，将其显示出来
    pics[index].style.dispaly="block";
}
slideTmg();


写回答

2回答

好帮手慕小尤

2020-04-01

已采纳

同学你好，修改后代码如下所示：

// 封装一个代替getElementById()的方法
function byId(id){
     return typeof(id) ==="string"?document.getElementById(id):id;
}
//全局变量
var index = 0,
    timer =  null,
    // getElementsByTagName书写错误
    pics = byId("banner").getElementsByTagName("div"),
    // dots获取id为dots下的span标签
    dots = byId("dots").getElementsByTagName("span"),
    prev = byId("prev"),
    next = byId("next"),
    len = pics.length,
    menu = byId("menu-content"),
    subMenu =byId("sub-menu"),
    // getElementsByClassName ie8不支持
    // getElementsByTagName书写错误
    innerBox = subMenu.getElementsByTagName("inner-box"),
    menuItems = menu.getElementsByClassName("menu-item"),
    subItems = subMenu.getElementsByClassName("inner-box");

function slideTmg(){
    var main =byId("main");
     var banner = byId("banner");
    var menuContent = byId("menu-content");
        //划过清除定时器，离开继续
        main.onmouseover =function(){
            //划过清除定时器
             if(timer) clearInterval(timer);
        }
        main.onmouseout =function(){
            // 少了一个括号
            timer =setInterval(function(){
                index++; //leng = 3 0 1 2
                if(index >= len){
                    index = 0;
                }
                //切换图片
                // 调用changeImg()
                changeImg();
            },3000);
        }
        // 自动在mian上触发鼠标离开事件
    main.onmouseout();
    //便利所有点击，且绑定点击事件，点击圆点切图片
    for(var d=0,len=dots.length;d<len;d++){
        //给所有的span天价烟ongoin一个id属性，值为d，作为当前span的索引
        dots[d].id=d;
        dots[d].onclick = function(){
            // 改变index当前span的值

            index = this.id;
            //调用changeimhg，实现切换图片
            changeImg();
        }
    }
    //下一张，递增
    next.onclick = function(){
        index++;
        if(index >=len )index=0;
        changeImg();
    }
    //上一张，递减
    prev.onclick =function(){
        index--;
        if(index <0  )index = len-1;
        changeImg();
    }
    //导航菜单
    //遍历主菜单，且绑定时间
    for(var m=0;m<menuItems.length;m++){
        //每一个menu-item定义data-index属性，作为索引
        menuItems[m].setAttribute("data-index",m);
        menuItems[m].onmouseover =function(){
            var idx = this.getAttribute("data-index");
            subMenu.className = "sub-menu"; 
            innerBox[idx];
        }
    }
}
function changeImg(){
    //遍历banner下多有的div及dots下的所有哦span，将div，将其span显示
    for(var i=0,len=dots.length;i<len;i++){
        dots[i].className = "";
        pics[i].style.display = "none";
    }
    // 根据index的索引找到当前的div，将其显示出来
    dots[index].className = "active";
    pics[index].style.display = "block";
}
slideTmg();
*{
    margin: 0;
}
@font-face{
    font-family: "iconfont";
    src:url("./img/font/iconfont.eot");
/*去除多余的分号*/
    src:url("./img/font/iconfont.eot") format("embedded-opentype"),
        url("./img/font/iconfont.woff") format("woff"),
        url("./img/font/iconfont.ttf")    format("truetype"),
        url("./img/font/iconfont.svg#iconfong")  format("svg") ;
}
ul{
    list-style: none;
}
a:link,a:visited{
    text-decoration: none;
}
body{
    font-family: "微软雅黑";
    color: #11419e; 
}
.main{
    width: 1200px;
    height: 460px;
    margin: 300px auto;
    /*相对定位*/
    position: relative;
}
.banner{
    width: 1200px;
    height: 460px;
}
.banner-slide{
    width: 1200px;
    height: 460px;
    position: absolute;
    background-repeat: no-repeat;
}
.slide-active{
    display:block;
}

.slide1{

    background:url(./img/bg1.jpg);
}

.slide2{
    background:url(./img/bg2.jpg);
}

.slide3{
    background:url(./img/bg3.jpg);
}

.button{
    /*绝对定位*/
    position: absolute;
    width: 40px;
    height: 80px;
    left: 244px;
    /*使其居中显示*/
    top: 50%;
    margin-top: -40px;
    background: url(./img/arrow.png) no-repeat center center;

}
.button:hover{
    opacity: 0.8;
    filter: alpha(opacity=80);
    /* 设置鼠标划过的背景图*/
    background-color:#333;
}

.prev{
    transition: rotate(180deg);
}
.next{
    left: auto;
    right: 0;
  

}
.dots{
    position: absolute;
    bottom: 24px;
    text-align: right;
    right: 10px;

}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 12px;
    border-radius: 50%;
    background-color: rgba(7,17,27,0.4);
    box-shadow:0 0 0 0 2px rgba(255,255,255,0.8) inset;
    margin-left: 8px;
    cursor: pointer;
}
.dots span.sctive{
    box-shadow:0 0 0 0 2px  rgba(7,17,27,0.4) inset;
    background-color: #fff;
}

/*导航菜单*/
.menu-box{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0px;
    top: 0;
    background:rgba(7,17,27,0.5); 
    opacity: 0.5;
    z-index: 1;
}
.menu-content{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0px;
    left: 0px;
    top: 0;
    z-index: 2;
    padding-top: 6px;
}
.menu-item{
    height: 64px;
    line-height: 66px;
    font-size: 16px;
    padding: 0 24px;
    /*相对定位*/
    position: relative;

}
/*.menu-item a:link, .menu-item a:visited{
    color#fff;
    border-bottom: 1px  solid rgba(255,255,255,0.2)
    padding0 8px;
}*/

.menu-item a:link, .menu-item a:visited{
    color:#fff;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 8px;
}
.menu-item i{
    position: absolute;
    right: 32px;
    font-size: 24px;
    top: 2px;
    font-family: "iconfont";
    font-style: normal;
    font-weight: normal;
}
.sub-menu{
    width: 730px;
    height: 458px;
    border:1px solid #d9dde1;
    background:#fff;
    position: absolute;
    left: 244px;
    top: 0;
    z-index: 999;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}
.inner-box{
    width: 100%;
    height: 100%;
    background:url(./img/fe.png) no-repeat;
    display: none;
}
.sub-inner-box{
    width: 652px;
    overflow: hidden;

}
.sub-row{
    margin-bottom: 25px;

}
.title{
    color: #f01414;
    font-size: 16px;
    margin: 28px 0 30px 0;

}
.bold{
    font-weight:bold;
}
.mr10{
    margin-right: 10px;
}
.ml10{
    margin-left: 10px;
}
.hide{
    display: none;
}

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

0

好帮手慕小尤

2020-04-01

同学你好，1. 在slideTmg()方法中少了一个括号导致异常，建议同学添加上。修改后代码如下所示：

http://img.mukewang.com/climg/5e84004809c68a1505720371.jpg

2. 在HTML代码中缺少id为banner与dots的元素并getElementsByTagName书写错误，少了一个s，导致获取内容失败。修改后代码如下所示：

http://img.mukewang.com/climg/5e83ff6709d60dd708920513.jpg

http://img.mukewang.com/climg/5e83ff9c09fe360e07040455.jpg

3. 在slideTmg()方法中clearInterval()方法名书写错误。修改后代码建议同学参考1.

4. 在css中的@font-face中去除多余的分号。修改后代码如下所示：

http://img.mukewang.com/climg/5e84018d0971fac007990251.jpg

5. 在slideTmg()方法中 main.onmouseout =function()中调用 changeImg()方法。修改代码如下所示：

http://img.mukewang.com/climg/5e8403420999585005880274.jpg

6. 在 <div class="sub-inner-box">标签外需要 <div class="iner-box">包裹着。修改后代码如下所示：

http://img.mukewang.com/climg/5e84092e093c8ff607170457.jpg

7. 循环展示banner下多有的div及dots的应该从dots.length中获取。修改后代码如下所示：

http://img.mukewang.com/climg/5e840b440912834707810351.jpg

http://img.mukewang.com/climg/5e840b5e0977d08c08030257.jpg

8. banner-slide书写错误，导致div没有宽度图片无法显示。修改后代码如下所示：

http://img.mukewang.com/climg/5e84107609e19dee04610166.jpg

9. 在设置上一张，下一章按钮时缺少引号，导致未成功设置class属性。修改后代码如下所示：

http://img.mukewang.com/climg/5e8410ad09c4fc0109630193.jpg

http://img.mukewang.com/climg/5e84128e09b30a2207330502.jpg

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

0

0 学习 · 9666 问题

查看课程

相似问题

代码中的问题

回答 1

老师帮忙检查下代码，解答下注释

回答 1

回答 1

回答 5

已贴上完整代码老师指点下

回答 4

打开慕课网App查看更多内容