按照國際慣例先放效果圖
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <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="">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> <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<size;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<dots.length;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.length;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.length;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'; });
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/158694.html
標籤：JavaScript
上一篇：js對當前時間進行處理