用原生JS实现爱奇艺首页导航栏
以下是爱奇艺首页的一个导航栏，用原生js写的，静态页面效果如下：
代码如下：
1 <html> 2 <head> 3 <title>爱奇艺</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 * { 7 padding: 0; 8 margin: 0; 9 } 10 .wrap { 11 height: 520px; 12 background-color: #000; 13 width: 100%; 14 } 15 .wrap .img-wrap { 16 height: 100%; 17 margin: 0 auto; 18 background-image: url('1.jpg'); 19 background-repeat: no-repeat; 20 background-position: 50% 50%; 21 background-size: auto 100%; 22 position: relative; 23 } 24 /* 媒体查询 */ 25 @media screen and (max-width: 2000px) { 26 .wrap .img-wrap .item-list { 27 right: 10%; 28 } 29 } 30 @media screen and (max-width: 1600px) { 31 .wrap .img-wrap .item-list { 32 right: 8%; 33 } 34 } 35 @media screen and (max-width: 1300px) { 36 .wrap .img-wrap .item-list { 37 right: 5%; 38 } 39 } 40 .wrap .img-wrap .item-list { 41 box-sizing: border-box; 42 height: 100%; 43 background-color: rgba(0,0,0,0.7); 44 width: 280px; 45 position: absolute; 46 47 list-style: none; 48 padding: 10px 0; 49 } 50 .wrap .img-wrap .item-list li { 51 padding: 0 15px; 52 } 53 .wrap .img-wrap .item-list li.active { 54 /*background-color: -webkit-linear-gradient(left, rgba(0,0,0,.3), rgba(0,0,0,0.1));*/ 55 background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,0)); 56 cursor: pointer; 57 } 58 .wrap .img-wrap .item-list li span { 59 line-height: 40px; 60 color: #eee; 61 font-size: 16px; 62 } 63 .wrap .img-wrap .item-list li.active span { 64 color: #00be06; 65 display: block; 66 } 67 .wrap .img-wrap .item-list li.active span:nth-child(1) { 68 font-size: 24px; 69 transition: font-size 0.2s; 70 } 71 .wrap .img-wrap .item-list li.active span:nth-child(2) { 72 display: none; 73 } 74 </style> 75 </head> 76 <body> 77 <div class="wrap"> 78 <div class="img-wrap"> 79 <ul class="item-list"> 80 </ul> 81 </div> 82 </div> 83 <script type="text/javascript"> 84 let items = [ 85 { 86 title: '遇见幸福', 87 desc: '24点体会人生百味', 88 url: '1.jpg' 89 }, 90 { 91 title: '中国达人秀', 92 desc: '真假岳岳在线劈叉', 93 url: '2.jpg' 94 }, 95 { 96 title: '中国新说唱', 97 desc: '全国4强诞生！', 98 url: '3.jpg' 99 }, 100 { 101 title: '做家务', 102 desc: '魏大勋花钱做音乐', 103 url: '4.jpg' 104 }, 105 { 106 title: '扫毒2', 107 desc: '刘德华硬战古天乐', 108 url: '5.jpg' 109 }, 110 { 111 title: '加油', 112 desc: '郝泽宁隔屏告白福子', 113 url: '6.jpg' 114 }, 115 { 116 title: '小欢喜', 117 desc: '宋倩乔卫东重归于好', 118 url: '7.jpg' 119 }, 120 { 121 title: '谋爱上瘾', 122 desc: '契约夫妇遇感情危机', 123 url: '8.jpg' 124 }, 125 { 126 title: '此食此客', 127 desc: '啤酒花蛤夏日绝配', 128 url: '9.jpg' 129 }, 130 { 131 title: '爱奇艺特别策划', 132 desc: '我们的70年', 133 url: '10.jpg' 134 } 135 ]; // 需要展示的数据，通常从后端获取 136 137 let curIndex = 0; // 当前索引 138 139 let isAutoMove = true; // 是否可以自动改变图片 140 141 let interval = 1000; // 自动轮播的间隔时间 142 143 // 封装函数：生成新的标签 144 function createTag(tag) { 145 return document.createElement(tag); 146 } 147 148 // 封装函数：生成文本节点 149 function createText(text) { 150 return document.createTextNode(text); 151 } 152 153 // 封装函数：初始化列表 154 function initItemList() { 155 let ul = document.getElementsByClassName('item-list')[0]; 156 157 for (let i = 0; i < items.length; i++) { 158 let li = createTag('li'); 159 if (i == 0) { li.classList.add('active') } 160 let span1 = createTag('span'); 161 let span2 = createTag('span'); 162 let span3 = createTag('span'); 163 let text1 = createText(items[i].title); 164 let text2 = createText('：'); 165 let text3 = createText(items[i].desc); 166 span1.appendChild(text1); 167 span2.appendChild(text2); 168 span3.appendChild(text3); 169 170 li.appendChild(span1); 171 li.appendChild(span2); 172 li.appendChild(span3); 173 ul.appendChild(li); 174 175 addHoverListener(li, i); 176 } 177 } 178 179 // 鼠标hover右侧栏时改变背景图片及文字样式 180 function addHoverListener(trigger, index) { 181 trigger.addEventListener('mouseenter', function () { 182 curIndex = index; // 保存当前索引 183 changeImage(); 184 activeText(); 185 }); 186 } 187 188 // 根据index改变背景图片 189 function changeImage() { 190 console.log('curIndex: ', curIndex); 191 let imgUrl = items[curIndex].url; 192 let imgWrap = document.getElementsByClassName('img-wrap')[0]; 193 imgWrap.style.cssText = "background-image: url('" + imgUrl + "')"; 194 } 195 196 // 根据index改变右侧激活文本的样式 197 function activeText() { 198 let activeObj = document.getElementsByClassName('active')[0]; 199 let li = document.getElementsByTagName('li')[curIndex]; 200 if (activeObj) { 201 activeObj.classList.remove('active'); 202 } 203 li.classList.add('active'); 204 } 205 206 // 鼠标移入移出wrap区域时响应关闭、开启自动轮播 207 function addEnterListener() { 208 let wrap = document.getElementsByClassName('wrap')[0]; 209 wrap.addEventListener('mouseenter', function () { 210 isAutoMove = false; 211 }); 212 wrap.addEventListener('mouseleave', function () { 213 isAutoMove = true; 214 }); 215 } 216 217 // 定时切换图片：使用定时器setInterval(function(){}, time) 218 function autoMove() { 219 let timer = setInterval(function () { 220 if (isAutoMove) { 221 if (curIndex < 9) { 222 curIndex ++; 223 } else { 224 curIndex = 0; 225 } 226 changeImage(); 227 activeText(); 228 } 229 }, interval); 230 } 231 232 window.onload = function () { 233 initItemList(); 234 addEnterListener(); 235 autoMove(); 236 } 237 </script> 238 </body> 239 </html>
