Recently received the leadership of the mission, to give a few lessons on the outside of the front section of students, lesson planning time to prepare a number of small projects, in this record it.
The following is iQIYI home of a navigation bar, a native js wrote, static pages effect is as follows:
code show as below:
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 the let items = [ 85 { 86 title: 'met happy' , 87 desc: experience lifestyle '24 point ' , 88 URL:' 1.jpg ' 89 }, 90 { 91 is title:' Chinese people show ' , 92 desc:'Yue Yue genuine online splits' , 93 URL: '2.jpg' 94 }, 95 { 96 title: 'New Chinese rap' , 97 desc: 'National Top 4 born! ' , 98 URL:' 3.jpg ' 99 }, 100 { 101 title:' housework ' , 102 desc:' Wei Taixun spend money on music ' , 103 URL:' 4.jpg ' 104 }, 105 { 106 title: '2 anti-drug'107 desc: 'Andy hard battle Koo' , 108 URL: '5.jpg' 109 }, 110 { 111 title: 'fuel' , 112 desc: 'Hao Zening Geping Advertisement Baifu Zi' , 113 URL: '6.jpg' 114 }, 115 { 1 16 title: 'small joy' , 117 desc: 'Song Weidong Qianqiao reconciled' , 1 18 URL: '7.jpg' 119 }, 120 { 121 title: 'addictive for Love' , 122 desc: 'Contract couple encountered emotional crisis' , 123 URL:' 8.jpg ' 124 }, 125 { 126 title:' This food this off ' , 127 desc:' hops clam summer perfect match ' , 128 url:' 9.jpg ' 129 }, 130 { 131 title:' iQIYI special plan ' , 132 desc:' our 70 years' , 133 URL: '10 .jpg ' 134 } 135 ]; // needs to display data, typically obtained from a rear end 136 137 the let curIndex = 0; // current index 138 139 the let = isAutoMove to true ; // whether the image can be automatically changed 140 141 is the let interval the = 1000; // interval automatic carousel 142 143 @ encapsulation functions: generate a new ticket 144 function createTag (tag) { 145 return document.createElement (tag); 146 } 147 148 //Package functions: generate text nodes 149 function CreateText (text) { 150 return document.createTextNode (text); 151 } 152 153 // wrapper functions: initialization list 154 function initItemList () { 155 the let document.getElementsByClassName UL = ( 'item- List ') [0 ]; 156 157 for (the let I = 0; I <items.length; I ++ ) { 158 the let Li = createTag (' Li ' ); 159 IF (I == 0) {li.classList.add ( 'Active' )} 160. the 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 // change the mouse hover right side bar background images and text styles 180 function addHoverListener (the Trigger, index) { 181 trigger.addEventListener ( 'MouseEnter', function () { 182 curIndex = index; // save the current index 183 is ChangeImage (); 184 activeText (); 185 }); 186 } 187 188 // The index change the background image 189 function ChangeImage () { 190 the console.log ( 'curIndex:' , curIndex); 191 the let for imgUrl = items [curIndex] .url; 192 the let imgWrap = document.getElementsByClassName ( 'IMG -wrap ') [0 ]; 193 imgWrap.style.cssText = "background-Image: URL ('" for imgUrl + + " ')" ; 194 } 195 196 // the right to change the index of the active text style 197 function activeText () { 198 activeObj = document.getElementsByClassName the let ( 'Active') [0 ]; 199 the let document.getElementsByTagName Li = ( 'Li' ) [curIndex]; 200 is IF (activeObj) { 201 activeObj.classList.remove ( 'Active' ); 202 } 203 li.classList.add ( 'Active' ); 204 } 205 206 // response to mouse moved out of the closed wrap area, open the automatic carousel 207 function addEnterListener () { 208 the let = document.getElementsByClassName wrap ( '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 }, range); 230 } 231 232 window.onload = function () { 233 initItemList (); 234 addEnterListener(); 235 autoMove(); 236 } 237 </script> 238 </body> 239 </html>