图片切换PLUS
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>05 图片切换PLUS</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 #box{ 12 border: 1px solid #ccc; 13 width: 430px; 14 height: 70px; 15 padding-top: 430px; 16 background: url('images/big_pic1.jpg') no-repeat; 17 } 18 #box ul li{ 19 display: inline-block; 20 margin-right: 15px; 21 } 22 </style> 23 </head> 24 <body> 25 <div id="box"> 26 <ul> 27 <li class="item"> 28 <img src="images/pic1.jpg"> 29 </li> 30 <li class="item"> 31 <img src="images/pic2.jpg"> 32 </li> 33 <li class="item"> 34 <img src="images/pic3.jpg"> 35 </li> 36 <li class="item"> 37 <img src="images/pic4.jpg"> 38 </li> 39 <li class="item"> 40 <img src="images/pic5.jpg"> 41 </li> 42 </ul> 43 </div> 44 <script type="text/javascript"> 45 // 1.获取事件源 46 function $(id){ 47 return typeof id === 'string' ? document.getElementById(id) : null; 48 } 49 var items = document.getElementsByClassName('item'); 50 for(var i = 0;i < items.length; i++){ 51 var item = items[i]; 52 item.index = i+1; // 记录每一个item的index，切换图片时调用 53 items[i].onmouseover = function(){ 54 $('box').style.background = ` url('images/big_pic${this.index}.jpg') no-repeat`; 55 } 56 } 57 </script> 58 59 </body> 60 </html>
关闭小广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关闭小广告</title> <style type="text/css"> *{ padding: 0; margin: 0; } #qe_code{ width: 180px; height: 160px; margin: 100px auto; position: relative; } #qe_code img{ position: absolute; right: 0; } #qe_code #close{ position: absolute; width: 18px; height: 18px; border: 1px solid #e0e0e0; text-align: center; line-height: 18px; cursor: pointer; color: #666; } </style> </head> <body> <div id="qe_code"> <img src="images/phone_taobao.png" id="code"> <span id="close">X</span> </div> </body> <script type="text/javascript"> window.onload = function () { var close = document.getElementById('close'); var qe_code = document.getElementById('qe_code'); close.onclick = function () { qe_code.parentNode.removeChild(qe_code); } } </script> </html>