小白项目-JavaScript实现轮播特效
加油吧
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/style.css"> 7 </head> 8 <body> 9 <div class="main" id="main"> 10 <div class="menu-box"> 11 </div> 12 <!--内容--> 13 <div class="sub-menu hide" id="sub-menu"> 14 <div class="inner-box"> 15 <div class="sub-inner-box"> 16 <div class="title">手机、配件</div> 17 <div class="sub-row"> 18 <span class="bold mr10">手机通讯：</span> 19 <a href="">手机</a> 20 <span class="ml10 mr10">/</span> 21 <a href="">手机维修</a> 22 <span class="ml10 mr10">/</span> 23 <a href="">以旧换新</a> 24 </div> 25 <div class="sub-row"> 26 <span class="bold mr10">手机配件：</span> 27 <a href="">手机壳</a> 28 <span class="ml10 mr10">/</span> 29 <a href="">手机存储卡</a> 30 <span class="ml10 mr10">/</span> 31 <a href="">数据线</a> 32 <span class="ml10 mr10">/</span> 33 <a href="">充电器</a> 34 <span class="ml10 mr10">/</span> 35 <a href="">电池</a> 36 </div> 37 <div class="sub-row"> 38 <span class="bold mr10">运营商：</span> 39 <a href="">中国联通</a> 40 <span class="ml10 mr10">/</span> 41 <a href="">中国移动</a> 42 <span class="ml10 mr10">/</span> 43 <a href="">中国电信</a> 44 </div> 45 <div class="sub-row"> 46 <span class="bold mr10">智能设备：</span> 47 <a href="">智能手环</a> 48 <span class="ml10 mr10">/</span> 49 <a href="">智能家居</a> 50 <span class="ml10 mr10">/</span> 51 <a href="">智能手表</a> 52 <span class="ml10 mr10">/</span> 53 <a href="">其他配件</a> 54 </div> 55 <div class="sub-row"> 56 <span class="bold mr10">娱乐：</span> 57 <a href="">耳机</a> 58 <span class="ml10 mr10">/</span> 59 <a href="">音响</a> 60 <span class="ml10 mr10">/</span> 61 <a href="">收音机</a> 62 <span class="ml10 mr10">/</span> 63 <a href="">麦克风</a> 64 </div> 65 </div> 66 </div> 67 <div class="inner-box"> 68 <div class="sub-inner-box"> 69 <div class="title">电脑</div> 70 <div class="sub-row"> 71 <span class="bold mr10">电脑：</span> 72 <a href="">笔记本</a> 73 <span class="ml10 mr10">/</span> 74 <a href="">平板</a> 75 <span class="ml10 mr10">/</span> 76 <a href="">一体机</a> 77 </div> 78 <div class="sub-row"> 79 <span class="bold mr10">电脑配件：</span> 80 <a href="">显示器</a> 81 <span class="ml10 mr10">/</span> 82 <a href="">CPU</a> 83 <span class="ml10 mr10">/</span> 84 <a href="">主板</a> 85 <span class="ml10 mr10">/</span> 86 <a href="">硬盘</a> 87 <span class="ml10 mr10">/</span> 88 <a href="">电源</a> 89 <span class="ml10 mr10">/</span> 90 <a href="">显卡</a> 91 <span class="ml10 mr10">/</span> 92 <a href="">其他配件</a> 93 </div> 94 <div class="sub-row"> 95 <span class="bold mr10">游戏设备：</span> 96 <a href="">游戏机</a> 97 <span class="ml10 mr10">/</span> 98 <a href="">耳机</a> 99 <span class="ml10 mr10">/</span> 100 <a href="">游戏软件</a> 101 </div> 102 <div class="sub-row"> 103 <span class="bold mr10">网络产品：</span> 104 <a href="">路由器</a> 105 <span class="ml10 mr10">/</span> 106 <a href="">网络机顶盒</a> 107 <span class="ml10 mr10">/</span> 108 <a href="">交换机</a> 109 <span class="ml10 mr10">/</span> 110 <a href="">存储卡</a> 111 <span class="ml10 mr10">/</span> 112 <a href="">网卡</a> 113 </div> 114 <div class="sub-row"> 115 <span class="bold mr10">外部产品：</span> 116 <a href="">鼠标</a> 117 <span class="ml10 mr10">/</span> 118 <a href="">键盘</a> 119 <span class="ml10 mr10">/</span> 120 <a href="">U盘</a> 121 <span class="ml10 mr10">/</span> 122 <a href="">移动硬盘</a> 123 <span class="ml10 mr10">/</span> 124 <a href="">鼠标垫</a> 125 <span class="ml10 mr10">/</span> 126 <a href="">电脑清洁</a> 127 </div> 128 </div> 129 </div> 130 <div class="inner-box"> 131 <div class="sub-inner-box"> 132 <div class="title">家用电器</div> 133 <div class="sub-row"> 134 <span class="bold mr10">电视：</span> 135 <a href="">国产品牌</a> 136 <span class="ml10 mr10">/</span> 137 <a href="">韩国品牌</a> 138 <span class="ml10 mr10">/</span> 139 <a href="">欧美品牌</a> 140 </div> 141 <div class="sub-row"> 142 <span class="bold mr10">空调：</span> 143 <a href="">显示器</a> 144 <span class="ml10 mr10">/</span> 145 <a href="">柜式</a> 146 <span class="ml10 mr10">/</span> 147 <a href="">中央</a> 148 <span class="ml10 mr10">/</span> 149 <a href="">壁挂式</a> 150 </div> 151 <div class="sub-row"> 152 <span class="bold mr10">冰箱：</span> 153 <a href="">多门</a> 154 <span class="ml10 mr10">/</span> 155 <a href="">对开门</a> 156 <span class="ml10 mr10">/</span> 157 <a href="">三门</a> 158 <span class="ml10 mr10">/</span> 159 <a href="">双门</a> 160 </div> 161 <div class="sub-row"> 162 <span class="bold mr10">洗衣机：</span> 163 <a href="">滚筒式洗衣机</a> 164 <span class="ml10 mr10">/</span> 165 <a href="">迷你洗衣机</a> 166 <span class="ml10 mr10">/</span> 167 <a href="">洗烘一体机</a> 168 </div> 169 <div class="sub-row"> 170 <span class="bold mr10">厨房电器：</span> 171 <a href="">油烟机</a> 172 <span class="ml10 mr10">/</span> 173 <a href="">洗碗机</a> 174 <span class="ml10 mr10">/</span> 175 <a href="">燃气灶</a> 176 </div> 177 </div> 178 </div> 179 <div class="inner-box"> 180 <div class="sub-inner-box"> 181 <div class="title">家具</div> 182 <div class="sub-row"> 183 <span class="bold mr10">家纺：</span> 184 <a href="">被子</a> 185 <span class="ml10 mr10">/</span> 186 <a href="">枕头</a> 187 <span class="ml10 mr10">/</span> 188 <a href="">四件套</a> 189 <span class="ml10 mr10">/</span> 190 <a href="">床垫</a> 191 </div> 192 <div class="sub-row"> 193 <span class="bold mr10">灯具：</span> 194 <a href="">台灯</a> 195 <span class="ml10 mr10">/</span> 196 <a href="">顶灯</a> 197 <span class="ml10 mr10">/</span> 198 <a href="">节能灯</a> 199 <span class="ml10 mr10">/</span> 200 <a href="">应急灯</a> 201 </div> 202 <div class="sub-row"> 203 <span class="bold mr10">厨具：</span> 204 <a href="">烹饪锅具</a> 205 <span class="ml10 mr10">/</span> 206 <a href="">餐具</a> 207 <span class="ml10 mr10">/</span> 208 <a href="">菜板刀具</a> 209 </div> 210 <div class="sub-row"> 211 <span class="bold mr10">家装：</span> 212 <a href="">地毯</a> 213 <span class="ml10 mr10">/</span> 214 <a href="">沙发垫套</a> 215 <span class="ml10 mr10">/</span> 216 <a href="">装饰字画</a> 217 <span class="ml10 mr10">/</span> 218 <a href="">照片墙</a> 219 <span class="ml10 mr10">/</span> 220 <a href="">窗帘</a> 221 </div> 222 <div class="sub-row"> 223 <span class="bold mr10">生活日用：</span> 224 <a href="">收纳用品</a> 225 <span class="ml10 mr10">/</span> 226 <a href="">浴室用品</a> 227 <span class="ml10 mr10">/</span> 228 <a href="">雨伞雨衣</a> 229 </div> 230 </div> 231 </div> 232 </div> 233 <!-- 菜单 --> 234 <div class="menu-content" id="menu-content"> 235 <div class="menu-item"> 236 <a href=""> 237 <span>手机、配件</span> 238 <i class="icon"></i> 239 </a> 240 </div> 241 <div class="menu-item"> 242 <a href=""> 243 <span>电脑</span> 244 <i class="icon"></i> 245 </a> 246 </div> 247 <div class="menu-item"> 248 <a href=""> 249 <span>家用电器</span> 250 <i class="icon"></i> 251 </a> 252 </div> 253 <div class="menu-item"> 254 <a href=""> 255 <span>家具</span> 256 <i class="icon"></i> 257 </a> 258 </div> 259 </div> 260 <div class="banner" id="banner"> 261 <a href=""> 262 <div class="banner-slide slide1 slide-active"></div> 263 </a> 264 <a href=""> 265 <div class="banner-slide slide2"></div> 266 </a> 267 <a href=""> 268 <div class="banner-slide slide3"></div> 269 </a> 270 </div> 271 <a href="javascript:void(0)" class="button prev" id="prev"></a> 272 <a href="javascript:void(0)" class="button next" id="next"></a> 273 <div class="dots" id="dots"> 274 <span class="active"></span> 275 <span></span> 276 <span></span> 277 </div> 278 </div> 279 <script src="js/script.js"></script> 280 </body> 281 </html>
1 *{ 2 margin:0; 3 padding:0; 4 } 5 6 @font-face {font-family: 'iconfont'; 7 src: url('../img/font/iconfont.eot'); 8 src: url('../img/font/iconfont.eot') format('embedded-opentype'), 9 url('../img/font/iconfont.woff') format('woff'), 10 url('../img/font/iconfont.ttf') format('truetype'), 11 url('../img/font/iconfont.svg#iconfont') format('svg'); 12 } 13 14 a{ 15 text-decoration: none; 16 } 17 18 a:link,a:visited{ 19 color:#5e5e5e; 20 } 21 22 body{ 23 font-family:"微软雅黑"; 24 color: #14191e; 25 } 26 27 .main{ 28 width:1200px; 29 height:460px; 30 margin:30px auto; 31 position:relative; 32 overflow:hidden; 33 } 34 35 .banner{ 36 width:1200px; 37 height:460px; 38 overflow:hidden; 39 position:relative; 40 } 41 42 .banner-slide{ 43 width:1200px; 44 height:460px; 45 background-repeat:no-repeat; 46 float:left; 47 display:none; 48 } 49 50 .slide-active{ 51 display:block; 52 } 53 54 .slide1{ 55 background-image:url(../img/bg1.jpg); 56 } 57 58 .slide2{ 59 background-image:url(../img/bg2.jpg); 60 } 61 62 .slide3{ 63 background-image:url(../img/bg3.jpg); 64 } 65 66 .button{ 67 position: absolute; 68 transform:rotate(180deg); 69 top: 50%; 70 left: 244px; 71 height: 80px; 72 width: 40px; 73 margin-top:-40px; 74 background:url(../img/arrow.png) center center no-repeat; 75 } 76 77 .next{ 78 transform:rotate(0deg); 79 left:auto; 80 right:0; 81 } 82 83 .button:hover{ 84 background-color:#333; 85 opacity: 0.8; 86 filter:alpha(opacity=80); 87 } 88 89 .dots { 90 position: absolute; 91 bottom: 24px; 92 right: 0; 93 text-align: right; 94 padding-right: 24px; 95 line-height: 12px; 96 } 97 98 .dots span { 99 display: inline-block; 100 width: 12px; 101 height: 12px; 102 border-radius: 50%; 103 margin-left: 8px; 104 background-color: rgba(7, 17, 27, 0.4); 105 cursor: pointer; 106 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset; 107 } 108 109 .dots span.active{ 110 box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset; 111 background-color: #ffffff; 112 } 113 114 /* menu-box */ 115 .menu-box { 116 background:rgba(7, 17, 27, 0.5); 117 opacity: 0.5; 118 position: absolute; 119 left: 0px; 120 top: 0px; 121 width: 244px; 122 height: 460px; 123 z-index: 1; 124 } 125 126 .menu-content{ 127 position: absolute; 128 left: 0px; 129 top: 0px; 130 width: 244px; 131 height: 460px; 132 z-index: 2; 133 padding-top: 6px; 134 } 135 136 .menu-item{ 137 height: 64px; 138 line-height: 66px; 139 font-size: 12px; 140 cursor: pointer; 141 padding: 0 24px; 142 position: relative; 143 } 144 145 .menu-item a{ 146 display: block; 147 color: #fff; 148 padding: 0 8px; 149 border-bottom: 1px solid rgba(255, 255, 255, 0.2); 150 height: 63px; 151 font-size:16px; 152 } 153 154 .menu-item:last-child a{ 155 border-bottom:none; 156 } 157 158 .menu-item i{ 159 position: absolute; 160 right: 32px; 161 top: 24px; 162 color: rgba(255,255,255,0.5); 163 font-size: 24px; 164 top: 2px; 165 font-style:normal; 166 font-weight:normal; 167 font-family:"iconfont"; 168 } 169 170 .sub-menu { 171 border:1px solid #d9dde1; 172 background:#fff; 173 position: absolute; 174 left: 244px; 175 top: 0px; 176 width: 730px; 177 height: 458px; 178 z-index: 581; 179 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.1); 180 } 181 182 .hide{ 183 display:none; 184 } 185 186 .inner-box{ 187 width:100%; 188 height:100%; 189 background:url(../img/fe.png) no-repeat; 190 display:none; 191 } 192 193 .sub-inner-box{ 194 width: 652px; 195 margin-left: 40px; 196 overflow: hidden; 197 } 198 199 .title{ 200 color: #f01414; 201 font-size: 16px; 202 line-height: 16px; 203 margin-top: 28px; 204 font-weight: bold; 205 margin-bottom: 30px; 206 } 207 208 .sub-row{ 209 margin-bottom:25px; 210 } 211 212 .bold{ 213 font-weight:700; 214 } 215 216 .mr10{ 217 margin-right:10px; 218 } 219 220 .ml10{ 221 margin-left:10px; 222 }
1 var timer = null, 2 index = 0, 3 pics = byId("banner").getElementsByTagName("div"), 4 dots = byId("dots").getElementsByTagName("span"), 5 size = pics.length, 6 prev = byId("prev"), 7 next = byId("next"), 8 menuItems = byId("menu-content").getElementsByTagName("div"), 9 subMenu = byId("sub-menu"), 10 subItems = subMenu.getElementsByClassName("inner-box"); 11 12 function byId(id){ 13 return typeof(id)==="string"?document.getElementById(id):id; 14 } 15 16 // 清除定时器,停止自动播放 17 function stopAutoPlay(){ 18 if(timer){ 19 clearInterval(timer); 20 } 21 } 22 23 // 图片自动轮播 24 function startAutoPlay(){ 25 timer = setInterval(function(){ 26 index++; 27 if(index >= size){ 28 index = 0; 29 } 30 changeImg(); 31 },3000) 32 } 33 34 function changeImg(){ 35 for(var i=0,len=dots.length;i<len;i++){ 36 dots[i].className = ""; 37 pics[i].style.display = "none"; 38 } 39 dots[index].className = "active"; 40 pics[index].style.display = "block"; 41 } 42 43 function slideImg(){ 44 var main = byId("main"); 45 var banner = byId("banner"); 46 var menuContent = byId("menu-content"); 47 main.onmouseover = function(){ 48 stopAutoPlay(); 49 } 50 main.onmouseout = function(){ 51 startAutoPlay(); 52 } 53 main.onmouseout(); 54 55 // 点击导航切换 56 for(var i=0,len=dots.length;i<len;i++){ 57 dots[i].id = i; 58 dots[i].onclick = function(){ 59 index = this.id; 60 changeImg(); 61 } 62 } 63 64 // 下一张 65 next.onclick = function(){ 66 index++; 67 if(index>=size) index=0; 68 changeImg(); 69 } 70 71 // 上一张 72 prev.onclick = function(){ 73 index--; 74 if(index<0) index=size-1; 75 changeImg(); 76 } 77 78 // 菜单 79 for(var m=0,mlen=menuItems.length;m<mlen;m++){ 80 menuItems[m].setAttribute("data-index",m); 81 menuItems[m].onmouseover = function(){ 82 subMenu.className = "sub-menu"; 83 var idx = this.getAttribute("data-index"); 84 for(var j=0,jlen=subItems.length;j<jlen;j++){ 85 subItems[j].style.display = 'none'; 86 menuItems[j].style.background = "none"; 87 } 88 subItems[idx].style.display = "block"; 89 menuItems[idx].style.background = "rgba(0,0,0,0.1)"; 90 } 91 } 92 93 subMenu.onmouseover = function(){ 94 this.className = "sub-menu"; 95 } 96 97 subMenu.onmouseout = function(){ 98 this.className = "sub-menu hide"; 99 } 100 101 menuContent.onmouseout = function(){ 102 subMenu.className = "sub-menu hide"; 103 } 104 } 105 106 slideImg();