主菜单划到子菜单但是子菜单不显示

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告轮播</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="main" id="main">
<!-- 导航菜单 -->
<!-- menubox定义过透明度，会导致里面内容也是半透面的，所以内容另加 -->
<div class="menu-box"></div>
<!-- 主菜单 -->
<div class="menu-content" id="menu-content">
<div class="menu-item">
<a href="">
<span>手机、配件</span>
<i class="iconfont">&#xe604;</i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>电脑</span>
<i class="iconfont">&#xe604;</i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家用电器</span>
<i class="iconfont">&#xe604;</i>
</a>
</div>
<div class="menu-item">
<a href="">
<span>家具</span>
<i class="iconfont">&#xe604;</i>
</a>
</div>
</div>
 
<!-- 子菜单 -->
<div class="sub-menu hide" id="sub-menu">
<!-- 手机、配件 -->
<div class="inner-box">
<div class="title">手机、配件</div>
<div class="sub-row">
<span class="bold mr10">手机通讯：</span>
<a href="#">手机</a>
<span class="mr10 ml10">/</span>
<a href="#">手机维修</a>
<span class="mr10 ml10">/</span>
<a href="#">以旧换新</a>
</div>
<div class="sub-row">
<span class="bold mr10">电脑：</span>
<a href="#">手机壳</a>
<span class="mr10 ml10">/</span>
<a href="#">手机存储卡</a>
<span class="mr10 ml10">/</span>
<a href="#">数据线</a>
<span class="mr10 ml10">/</span>
<a href="#">充电器</a>
<span class="mr10 ml10">/</span>
<a href="#">电池</a>
</div>
<div class="sub-row">
<span class="bold mr10">运营商：</span>
<a href="#">中国联通</a>
<span class="mr10 ml10">/</span>
<a href="#">中国移动</a>
<span class="mr10 ml10">/</span>
<a href="#">中国电信</a>
</div>
<div class="sub-row">
<span class="bold mr10">智能设备：</span>
<a href="#">只能手环</a>
<span class="mr10 ml10">/</span>
<a href="#">智能家居</a>
<span class="mr10 ml10">/</span>
<a href="#">智能手表</a>
<span class="mr10 ml10">/</span>
<a href="#">其他配件</a>
</div>
<div class="sub-row">
<span class="bold mr10">娱乐：</span>
<a href="#">耳机</a>
<span class="mr10 ml10">/</span>
<a href="#">音响</a>
<span class="mr10 ml10">/</span>
<a href="#">收音机</a>
<span class="mr10 ml10">/</span>
<a href="#">麦克风</a>
</div>
</div>
<!-- 电脑 -->
<div class="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>
</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 class="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="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>
</div>
</div>
<!-- 家具 -->
<div class="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 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" id="prev" ></a>
<a href="javascript:void(0)" class="button next" id="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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

*{
    margin: 0;
    padding: 0;
}
 
@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
}
 
ul{
    list-style: none;
}
 
a:link,a:visited{
    text-decoration: none;
    color: #333;
}
 
body{
    font-family: "微软雅黑";
    color: #14191e;
}
 
.main{
    width: 1200px;
    height: 460px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}
 
.banner{
    width: 1200px;
    height: 460px;
    overflow: hidden;
    position: relative;
}
 
.banner-slide{
    width: 1200px;
    height: 460px;
    background-repeat: no-repeat;
    position: absolute;
    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{
    width: 40px;
    height: 80px;
    position: absolute;
    left: 244px;
    top: 50%;
    margin-top: -40px;
    background: url(../img/arrow.png) no-repeat center center;
}
 
.button:hover{
    background-color: #333;
    opacity: 0.4;
    /*下面这个针对一些低版本ie浏览器之类兼容的*/
    /*filter: alpha(opasity=40);*/
}
 
.prev{
    transform: rotate(180deg);
}
.next{
    left: auto;
    right: 0;
}
 
.dots{
    position: absolute;
    right: 10px;
    bottom: 24px;  
}
 
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /*rgba可以同时设置透明度*/
    background-color: rgba(7,17,27,0.6);
    box-shadow: 0 0 1px 2px rgba(255,255,255,0.8) inset;
    margin-right: 8px;
    cursor: pointer;
}
 
.dots .active{
    background-color: #fff;
    box-shadow: 0 0 1px 2px rgba(7,17,27,0.6) inset;
}
 
/*导航菜单*/
.menu-box{
    width: 244px;
    height: 460px;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(7,17,27,0.5);
    z-index: 1;
}
 
.menu-content{
    width: 244px;
    height: 454px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding-top: 6px;
}
 
.menu-item{
    height: 64px;
    line-height: 64px;
    padding-left: 24px;
    position: relative;
}
 
.menu-item a:link,.menu-item a:visited{
    color: #fff;
}
 
.menu-item a{
    display: block;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    height: 63px;
    padding: 0 8px;
}
 
.menu-item i{
    position: absolute;
    right: 32px;
    top: 0px;
    font-weight: normal;
    color: rgba(255,255,255,0.5);
}
 
.sub-menu{
    width: 730px;
    height: 458px;
    border: 1px solid #d9ddde;
    background-color: #fff;
    position: absolute;
    left: 244px;
    top: 0;
    z-index: 999;
    background: url(../img/fe.png) no-repeat center center;
}
 
.inner-box{
    width: 652px;
    margin-left: 40px;
    overflow: hidden;
    position: absolute;
    display: none;
}
 
.title{
    color: #f01414;
    line-height: 16px;
    margin:30px 0;
    font-weight: bolder;
}
 
.sub-row{
    margin-bottom: 25px;
}
 
.bold{
    font-weight: bold;
}
.mr10{
    margin-right: 10px;
}
.ml10{
    margin-left: 10px;
}
 
.hide{
    display: none;
}

// 封装一个代替getElementById()的方法
function byId(id){
    return typeof(id) ==="string"?document.getElementById(id):id;
}
 
var index =0,
    timer = null,
    pics = byId('banner').getElementsByTagName('div'),
    dots = byId('dots').getElementsByTagName('span'),
    len = pics.length;
var menu = byId('menu-content'),
    menuItems = menu.getElementsByClassName('menu-item'),
    subMenu=byId('sub-menu'),
    innerBoxs=subMenu.getElementsByClassName('inner-box');
 
// 切换图片
function changeImg(){
    // 遍历banner下div和dots下的span，将div隐藏，将span清楚类
    for(var i=0;i<len;i++){
        pics[i].style.display="none";
        dots[i].className='';
    }
    // 根据索引找到当前div和span，将其显示或激活
    pics[index].style.display="block";
    dots[index].className='active';
}
 
function slideImg(){ 
    var main=byId("main");
    // 滑过清除定时器，离开继续
    main.onmouseover = function(){
        // 滑过清除定时器
        if(timer) clearInterval(timer);
    };
    main.onmouseout = function(){
        // 离开启动定时器
        timer = setInterval(function(){
            index++;
            if(index>=len){
                index=0;
            }
            changeImg();
        },2000);
    };
    // 自动在main上出发鼠标离开的事件
    main.onmouseout();
 
    //遍历所有点击，绑定点击事件，点击圆点切换图片
    for(var d=0;d<len;d++){
        // 将圆点的索引设id属性，后面可可以根据id找到索引
        dots[d].id=d;
        // function引用外部可变变量是以变量的最后一个值作为参数
        dots[d].onclick=function(){
            index=this.id;
            changeImg();
             
        }
    }
 
    // 实现上一张，下一张按钮功能
    byId('next').onclick=function(){
        index++;
        if(index>=len) index=0;
        changeImg();
    };
    byId('prev').onclick=function(){
        index--;
        if(index<0) index=len-1;
        changeImg();
    };
 
    // 遍历主菜单，且绑定事件
    for(var i=0;i<menuItems.length;i++){
        // 给所有的menu-item添加一个data-index属性作为索引
        menuItems[i].setAttribute('data-index',i);
        menuItems[i].onmouseover=function(){
            var idx=this.getAttribute('data-index');
            for(var m=0;m<menuItems.length;m++){
                innerBoxs[m].style.display='none';
            }
            subMenu.className='sub-menu';
            innerBoxs[idx].style.display='block';
        }
    }
    menu.onmouseout=function(){
        subMenu.className='sub-menu hide';
    }
    subMenu.onmouseover=function(){
        subMenu.calssName="sub-menu";
        // console.log("aaa");
        // 加一个输出测试事件绑定成功，但是子菜单不显示
    }
    subMenu.onmouseout=function(){
        subMenu.calssName="sub-menu hide";
    }
}
 
slideImg();