老师效果出不来。。。

老师效果出不来。。。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index.css" />
 </head>
 <body>
 <div class="main" id="main">
  <!-- 左边的阴影 -->
  <div class="menu-box"></div>
  <!-- 内容 -->
  <div class="sub-menu hide" id="sub-menu">
   <div class="inner-box">
    <div class="sub-inner-box">
     <div class="title">手机、配件</div>
     <div class="sub-row">
      <span class="bold mr10">手机通讯：</span>
      <a href="">手机</a>
      <span class="ml10 mr10">/</span>
      <a href="">手机维修</a>
      <span class="ml10 mr10">/</span>
      <a href="">以旧换新</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">手机配件：</span>
      <a href="">手机壳</a>
      <span class="ml10 mr10">/</span>
      <a href="">手机存储卡</a>
      <span class="bold mr10">/</span>
      <a href="">数据线</a>
      <span class="ml10 mr10">/</span>
      <a href="">充电器</a>
      <span class="ml10 mr10">/</span>
      <a href="">电池</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">运营商：</span>
      <a href="">中国联通</a>
      <span class="ml10 mr10">/</span>
      <a href="">中国移动</a>
      <span class="ml10 mr10">/</span>
      <a href="">中国电信</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">智能设备：</span>
      <a href="">智能手环</a>
      <span class="ml10 mr10">/</span>
      <a href="">智能家居</a>
      <span class="ml10 mr10">/</span>
      <a href="">智能手表</a>
      <span class="ml10 mr10">/</span>
      <a href="">其他配件</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">娱乐：</span>
      <a href="">耳机</a>
      <span class="ml10 mr10">/</span>
      <a href="">音响</a>
      <span class="ml10 mr10">/</span>
      <a href="">收音机</a>
      <span class="ml10 mr10">/</span>
      <a href="">麦克风</a>
     </div>
    </div>
   </div>
   <div class="inner-box">
    <div class="sub-inner-box">
     <div class="title">电脑</div>
     <div class="sub-row">
      <span class="bold mr10">电脑：</span>
      <a href="">笔记本</a>
      <span class="ml10 mr10">/</span>
      <a href="">平板</a>
      <span class="ml10 mr10">/</span>
      <a href="">一体机</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">电脑配件：</span>
      <a href="">显示器</a>
      <span class="ml10 mr10">/</span>
      <a href="">CPU</a>
      <span class="ml10 mr10">/</span>
      <a href="">主板</a>
      <span class="ml10 mr10">/</span>
      <a href="">硬盘</a>
      <span class="ml10 mr10">/</span>
      <a href="">电源</a>
      <span class="ml10 mr10">/</span>
      <a href="">显卡</a>
      <span class="ml10 mr10">/</span>
      <a href="">其他配件</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">网咯产品：</span>
      <a href="">路由器</a>
      <span class="ml10 mr10">/</span>
      <a href="">网咯机顶盒</a>
      <span class="ml10 mr10">/</span>
      <a href="">交换机</a>
      <span class="ml10 mr10">/</span>
      <a href="">存储卡</a>
      <span class="ml10 mr10">/</span>
      <a href="">网卡</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">外部产品：</span>
      <a href="">鼠标</a>
      <span class="ml10 mr10">/</span>
      <a href="">键盘</a>
      <span class="ml10 mr10">/</span>
      <a href="">U盘</a>
      <span class="ml10 mr10">/</span>
      <a href="">移动硬盘</a>
      <span class="ml10 mr10">/</span>
      <a href="">鼠标垫</a>
      <span class="ml10 mr10">/</span>
      <a href="">电脑清洁</a>
     </div>
    </div>
   </div>
   <div class="inner-box">
    <div class="sub-inner-box">
     <div class="title">家用电器</div>
     <div class="sub-row">
      <span class="bold mr10">电视：</span>
      <a href="">国产品牌</a>
      <span class="ml10 mr10">/</span>
      <a href="">韩国品牌</a>
      <span class="ml10 mr10">/</span>
      <a href="">欧美品牌</a>
     </div>
     <div class="sub-row">
      <span class="ml10 mr10">空调：</span>
      <a href="">显示器</a>
      <span class="bold mr10">/</span>
      <a href="">柜式</a>
      <span class="ml10 mr10">/</span>
      <a href="">中央</a>
      <span class="ml10 mr10">/</span>
      <a href="">壁挂式</a>
      
     </div>
     <div class="sub-row">
      <span class="bold mr10">冰箱：</span>
      <a href="">多门</a>
      <span class="ml10 mr10">/</span>
      <a href="">对开门</a>
      <span class="ml10 mr10">/</span>
      <a href="">三门</a>
      <span class="ml10 mr10">/</span>
      <a href="">存储卡</a>
      <span class="ml10 mr10">/</span>
      <a href="">双门</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">洗衣机：</span>
      <a href="">滚筒式洗衣机</a>
      <span class="ml10 mr10">/</span>
      <a href="">迷你洗衣机</a>
      <span class="ml10 mr10">/</span>
      <a href="">洗烘洗衣机</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">厨房电器：</span>
      <a href="">油烟机</a>
      <span class="ml10 mr10">/</span>
      <a href="">洗碗机</a>
      <span class="ml10 mr10">/</span>
      <a href="">燃气灶</a>
     </div>
    </div>
   </div>
   <div class="inner-box">
    <div class="sub-inner-box">
     <div class="title">家具</div>
     <div class="sub-row">
      <span class="bold mr10">家纺：</span>
      <a href="">被子</a>
      <span class="ml10 mr10">/</span>
      <a href="">枕头</a>
      <span class="ml10 mr10">/</span>
      <a href="">四件套</a>
      <span class="ml10 mr10">/</span>
      <a href="">床垫</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">灯具：</span>
      <a href="">台灯</a>
      <span class="ml10 mr10">/</span>
      <a href="">顶灯</a>
      <span class="ml10 mr10">/</span>
      <a href="">节能灯</a>
      <span class="ml10 mr10">/</span>
      <a href="">应急灯</a>
      
     </div>
     <div class="sub-row">
      <span class="bold mr10">厨具：</span>
      <a href="">烹饪锅具</a>
      <span class="ml10 mr10">/</span>
      <a href="">餐具</a>
      <span class="ml10 mr10">/</span>
      <a href="">菜板刀具</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">家装：</span>
      <a href="">地毯</a>
      <span class="ml10 mr10">/</span>
      <a href="">沙发垫套</a>
      <span class="ml10 mr10">/</span>
      <a href="">装饰字画</a>
      <span class="ml10 mr10">/</span>
      <a href="">照片墙</a>
      <span class="ml10 mr10">/</span>
      <a href="">窗帘</a>
     </div>
     <div class="sub-row">
      <span class="bold mr10">生活日用：</span>
      <a href="">收纳日用</a>
      <span class="ml10 mr10">/</span>
      <a href="">于是日用</a>
      <span class="ml10 mr10">/</span>
      <a href="">雨伞雨衣</a>
     </div>
    </div>
   </div>
  </div>
  <!-- 菜单 -->
  <div class="menu-content" id="menu-content">
   <div class="menu-item">
    <a href="">
     <span>手机、配件</span>
     <i class="icon">&#xe665;</i>
    </a>
   </div>
   <div class="menu-item">
    <a href="">
     <span>电脑</span>
     <i class="icon">&#xe665;</i>
    </a>
   </div>
   <div class="menu-item">
    <a href="">
     <span>家用电器</span>
     <i class="icon">&#xe665;</i>
    </a>
   </div>
   <div class="menu-item">
    <a href="">
     <span>家具</span>
     <i class="icon">&#xe665;</i>
    </a>
   </div>
  </div>
  <div class="banner" id="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"></a>
   <a href="javascript:void(0)" class="button next"></a>
   <div class="dots" id="dots">
    <span class="active"></span>
    <span></span>
    <span></span>
   </div>
  </div>
  <script src="js/index.js"></script>
 </body>
</html>


*{
 margin:0;
 padding: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#iconfont') format('svg');
}
a{
 text-decoration:none;
}
a:link,a:visited{
 color:#5e5e5e;
}
body{
 font-family:"微软雅黑";
 color:#14191e;
}
.main{
 width:1200px;
 height:460px;
 margin:30px auto;
 position:relative;
 overflow:hidden;
}
.banner{
 width:1200px;
 height:460px;
 position:relative;
 overflow:hidden;
}
.banner-slide{
 width:1200px;
 height:460px;
 background-repeat: no-repeat;
 float:left;
 display:none;
}
.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;
 transform: rotate(180deg);
 top:50%;
 left: 244px;
 height:80px;
 width: 40px;
 margin-top: -40px;
 background:url(../img/arrow.png) center center no-repeat
}
.next{
 transform:rotate(0deg);
 left:auto;
 right:0;
}
.button:hover{
 background-color: #333;
 opacity:0.8;
 filter:alpha(opacity=80);
}
.dots{
 position:absolute;
 bottom:24px;
 right:0;
 text-align:right;
 padding-right:24px;
 line-height:12px;
}
.dots span{
 display:inline-block;
 width:12px;
 height:12px;
 border-radius:50%;
 margin-left:8px;
 background-color:rgba(7,17,27,0.4);
 cursor:pointer;
 box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;
}
.dots span.active{
 box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset;
 background-color:#fff;
}
/* menu-box */
.menu-box{
 background:rgba(7,17,27,0.5);
 opacity:0.5;
 position:absolute;
 left:0;
 top:0;
 width:244px;
 height:460px;
 z-index:1;
}
.menu-content{
 position:absolute;
 left:0;
 top:0;
 width:244px;
 height:460px;
 z-index:2;
 padding-top:6px;
 
}
.menu-item{
 height:64px;
 line-height:66px;
 font-size:12px;
 cursor:pointer;
 padding:0 24px;
 position:relative;
}
.menu-item a{
 display:block;
 color:#fff;
 padding:0 8px;
 border-bottom:1px solid rgba(255,255,255,0.2);
 height:63px;
 font-size:16px;
}
.menu-item:last-child a{
 border-bottom:none;
}
.menu-item i{
 position:absolute;
 right:32px;
 top:24px;
 color:rgba(255,255,255,0.5);
 font-size:24px;
 top:2px;
 font-style:normal;
 font-weight:normal;
 font-family:"iconfont";
}
.sub-menu{
 border:1px solid #d9dde1;
 background:#fff;
 position:absolute;
 left:224px;
 top:0px;
 width:730px;
 height:458px;
 z-index:581;
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.1);
}
.hide{
 display:none;
}
.inner-box{
 width:100%;
 height:100%;
 background:url(../img/fe.png) no-repeat;
 display:none;
}
.sub-inner-box{
 width:625px;
 margin-left:40px;
 overflow:hidden;
}
.title{
 color:#f014114;
 font-size:16px;
 line-height:16px;
 margin-top:28px;
 font-weight:bold;
 margin-bottom:30px;
}
.sub-row{
 margin-bottom:25px;
}
.bold{
 font-weight:700px;
}
.mr10{
 margin-right:10px;
 
}
.ml10{
 margin-left:10px;
 
}


var timer=null,
    index=0,
 pics=byId("banner").getElementsByTagName('div'),
 dots= byId("dots").getElementsByTagName('span'),
 size=pics.length,
 prev=byId("prev"),
 next=byId("next"),
 menuIterms=byId("menu-content").getElementsByTagName('div'),
 subMenu=byId("sub-menu"),
 subItems = subMenu.getElementsByClassName('inner-box');
 
function addHandler(element,type,handler){
 if (element.addEventListener) {
  element.addEventListener(type,handler,true);
 }
 else if(element.attachEvent){
  element.attachEvent('on'+type,handler);
 }
 else{
  element['on'+type]=handler;
 }
}
function byId(id){
 return typeof(id)=='string'?document.getElementById(id):id;
}

//清除定时器,暂停自动播放
function stopAutoPlay(){
 if(timer){
  clearInterval(timer);
 }
}
// 图片自动轮播
function starAutoPlay(){
 timer=setInterval(function(){
  index++;
  if(index>=size){
   index=0;
  }
  changeImg();
 },3000)
}
function changeImg(){
 for(var i=0,len=dots.length;i<len;i++){
  dots[i].className="",
  pics[i].style.display="none";
 }
 dots[index].className="active";
 pics[index].style.display="block";
}
function slideImg(){
 starAutoPlay();
 var main = byId("main");
 var banner = byId("banner");
 var menuContent= byId("menu-content");
 
 addHandler(main,"mouseover",stopAutoPlay);
 addHandler(main,"mouseout",starAutoPlay);

// 点击导航切换
for(var i=0,len=dots.length;i<len;i++){
 dots[i].id=i;
 addHandler(dots[i],"click",function(){
  index=this,id;
  changeImg();
 })
}
//下一张
addHandler(next,"click",function(){
 index++;
 if(index>=size) index=0;
 changeImg();
})
//上一张
addHandler(prev,"click",function(){
 index--;
 if(index<0) index=size-1;
 changeImg();
})
for(var m=0,mlen=menuIterms.length;m<mlen;m++){
 menuIterms[m].setAttribute("data-index",m);
 addHandler(menuIterms[m],"mouseover",function(){
  subMenu.className="sub-menu";
  var idx=this.getAttribute("data-index");
  for(var j=0,jlen=subItems.length;j<jlen;j++){
   subItems[j].style.display='none';
   menuIterms[j].style.background="none";
  }
  subItems[idx].style.display="block";
  menuIterms[idx].style.background="rgba(0,0,0,0.1)";
 });
}


addHandler(subMenu,"mouseover",function(){
 this.className="sub-menu";
});
addHandler(subMenu,"mouseout",function(){
 this.className="sub-menu hide";
});
addHandler(banner,"mouseout",function(){
 subMenu.className="sub-menu hide";
});
addHandler(menuContent,"mouseout",function(){
 subMenu.className="sub-menu hide";
});

}

addHandler(window,'load',slideImg());
前后1 2020-03-12
源自：项目：JS实现轮播图特效    3-1 事件绑定（1）
11
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕言 2020-03-12 18:25:57

同学你好，原因是元素没有获取到，html结构里面没有id为prev和next的元素，建议：可以给元素添加id，如下：
http://img1.sycdn.imooc.com//climg/5e6a0e2509034c6b09060081.jpg

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0
收起回答
  • 提问者 前后1 #1
    老师那个span图片下面的小圆框点击效果出不来
    2020-03-12 18:37:50
  • 提问者 前后1 #2
    老师我看到了，不用了
    2020-03-12 18:44:34
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

div加上hover之后效果没出来
0 0 7
老师我的效果出不来？
33 0 12
老师，效果出不来
11 0 2
效果怎么出不来呢
0 1 5
老师，我写的效果对不对
30 0 3

登录后可查看更多问答，登录/注册

1.前端零基础入门
  • 参与学习           人
  • 提交作业       8403    份
  • 解答问题       40143    个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答 作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师