按照国际惯例先放效果图
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demotitle>
<link rel="stylesheet" href="css/style.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="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>
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="">CPUa>
<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>
<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="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>
<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">i>
a>
div>
<div class="menu-item">
<a href="">
<span>电脑span>
<i class="icon">i>
a>
div>
<div class="menu-item">
<a href="">
<span>家用电器span>
<i class="icon">i>
a>
div>
<div class="menu-item">
<a href="">
<span>家具span>
<i class="icon">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="btn prev" id="prev">a>
<a href="javascript:void(0)" class="btn next" id="next">a>
<div class="dots" id="dots">
<span class="active">span>
<span>span>
<span>span>
div>
div>
<script src="js/script.js">script>
body>
html>
style.css
/*通用*/ *{ margin:0; padding:0; } @font-face{ font-family: 'iconfont'; src:url('../img/font/iconfont.eot'); src:url('../img/font/iconfont.eot') format('embeded-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*/ .banner-slide{ width:1200px; height:460px; 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); } .btn{ 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; } .btn:hover{ background-color:#333; opacity: 0.8; filter:alpha(opacity=80); } .next{ transform:rotate(0deg); left:auto; right:0; } .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: #ffffff; } /*menu主菜单*/ .menu-box{ position: absolute; top:0; left:0; width:244px; height:460px; z-index:1; background-color: rgba(7, 17, 27, 0.5); } .menu-content{ position: absolute; top:0; left:0; width:244px; z-index:2; } .menu-item{ height:64px; line-height:66px; padding:0 24px; } .menu-item a{ display: block; height:63px; position: relative; color:rgb(255,255,255); padding:0 8px; border-bottom:1px solid rgba(255,255,255,.2); } .menu-item:last-child a{ border-bottom:0; } .menu-item i{ position: absolute; right:24px; top:0px; font-style:normal; font-family:"iconfont"; font-size:24px; } /*menu子菜单*/ .sub-menu{ position: absolute; left:244px; top:0; z-index:500; width: 730px; height: 458px; background-color: #fff; border:1px solid #d9dde1; box-shadow: 0 4px 7px rgba(0,0,0,.1) inset; } .inner-box{ width:100%; height:100%; background:url(../img/fe.png) no-repeat; display: none; } .sub-inner-box{ width: 652px; margin-left: 40px; } .title{ color: #f01414; font-size: 16px; line-height: 16px; margin-top: 28px; font-weight: bold; margin-bottom: 30px; } .sub-row{ margin-bottom:25px; } .bold{ font-weight:bold; } .mr10{ margin-right:10px; } .ml10{ margin-left:10px; } .hide{ display: none; }
script.js
var index=0,//当前轮播图索引 timer=null, prev=byId('prev'), next=byId('next'), pics=byId('banner').getElementsByTagName('div'), dots=byId('dots').getElementsByTagName('span'), menuContent=byId('menu-content'), menuItems=menuContent.getElementsByClassName('menu-item'), subMenu=byId('sub-menu'), innerBoxs=subMenu.getElementsByClassName('inner-box'), main=byId('main'), banner=byId('banner'), size=pics.length; function byId(id){ return typeof(id)==='string'?document.getElementById(id):id; } // 兼容IE的事件绑定函数 function addHandler(elem,type,fn){ if(elem.addEventListener){ elem.addEventListener(type,fn); }else if(elem.attachEvent){ elem.attachEvent(type,fn); }else{ elem['on'+type]=fn; } } // 切换图片的函数 function changeImg(){ for(var i=0;i){ pics[i].style.display='none'; dots[i].className=''; } pics[index].style.display='block'; dots[index].className='active'; } // 自动轮播函数 function autoPlay(){ timer=setInterval(function(){ index++; if(index>=size) index=0; changeImg(); },1000); } // 停止自动轮播的函数 function stopPlay(){ if(timer){ clearInterval(timer); } } // 点击上一个按钮 addHandler(prev,'click',function(){ index--; if(index<0) index=size-1; changeImg(); }) // 点击下一个按钮 addHandler(next,'click',function(){ index++; if(index>=size) index=0; changeImg(); }) //点击圆点 for(var j=0;j ){ // 保存当前索引,否则索引始终会是3 dots[j].setAttribute('data-id',j); addHandler(dots[j],'click',function(){ index=this.getAttribute('data-id'); changeImg(); }) } //鼠标移入main停止轮播 addHandler(main,'mouseover',stopPlay); //鼠标移出main继续轮播 addHandler(main,'mouseout',autoPlay); //默认自动轮播 autoPlay(); //鼠标移入出现二级导航 for(var m=0;m ){ menuItems[m].setAttribute('data-index',m); addHandler(menuItems[m],'mouseover',function(){ subMenu.className='sub-menu'; var idx=this.getAttribute('data-index'); for(var d=0;d ){ innerBoxs[d].style.display='none'; menuItems[d].style.background = "none"; } innerBoxs[idx].style.display='block'; menuItems[idx].style.background = "rgba(0,0,0,0.1)"; }); } // 鼠标移出banner隐藏二级导航 addHandler(banner,'mouseout',function(){ subMenu.className='sub-menu hide'; }); // 鼠标移出主菜单隐藏二级导航 addHandler(menuContent,'mouseout',function(){ subMenu.className='sub-menu hide'; }); // 鼠标移出子菜单隐藏二级导航 addHandler(subMenu,'mouseout',function(){ this.className='sub-menu hide'; }); //鼠标移入子菜单,显示二级导航 addHandler(subMenu,'mouseover',function(){ this.className='sub-menu'; });