1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style > 6 ?????7 ????body{text-align:center} 8 ????div{align:center} 9 10 11 </style>12 <title>无标题文档</title>13 </head>14 15 <body>16 17 <select id="option" onchange="change()">18 ????<option value="1">图片1</option>19 ????<option value="2">图片2</option>20 ????<option value="3">图片3</option>21 ????<option value="4">图片4</option>22 ????23 </select>24 <br /><br /><br /><br />25 <div class="images" width="790px" >26 ????<div align="center">27 ????????<img id="1"width="790px" height="340px" src="../../课堂练习/js03/59a7a48aN7a42d3fe.jpg" style="display:block"/>28 ????????<img id="2"width="790px" height="340px" src="../../课堂练习/js03/59cc929fNaebef801.jpg" style="display:none"/>29 ????????<img id="3"width="790px" height="340px" src="../../课堂练习/js03/59ccc986Nbf17e33e.jpg" style="display:none"/>30 ????????<img id="4"width="790px" height="340px"src="../../课堂练习/js03/59ccec77N64688a8d.jpg" style="display:none"/>31 ????</div>32 </div>33 <script>34 ????function change(){35 ????????var opt=document.getElementById("option");36 ????????if(opt.value=="1"){37 ????????????var images=document.getElementsByTagName("img");38 ????????????for(var i=0;i<images.length;i++){39 ????????????????if(images[i].id==1){40 ????????????????images[i].style.display="block";41 ????????????}else{42 ????????????????images[i].style.display="none";43 ????????????}44 ????????????}45 ????????}46 ????????if(opt.value=="2"){47 ????????????var images=document.getElementsByTagName("img");48 ????????????for(var i=0;i<images.length;i++){49 ????????????????if(images[i].id==2){50 ????????????????images[i].style.display="block";51 ????????????}else{52 ????????????????images[i].style.display="none";53 ????????????}54 ????????????}55 ????????}56 ????????if(opt.value=="3"){57 ????????????var images=document.getElementsByTagName("img");58 ????????????for(var i=0;i<images.length;i++){59 ????????????????if(images[i].id==3){60 ????????????????images[i].style.display="block";61 ????????????}else{62 ????????????????images[i].style.display="none";63 ????????????}64 ????????????}65 ????????}66 ????????if(opt.value=="4"){67 ????????????var images=document.getElementsByTagName("img");68 ????????????for(var i=0;i<images.length;i++){69 ????????????????if(images[i].id==4){70 ????????????????images[i].style.display="block";71 ????????????}else{72 ????????????????images[i].style.display="none";73 ????????????}74 ????????????}75 ????????}76 ????????77 ????????78 ????????79 ????}80 81 </script>82 83 </body>84 </html>js中onchange（）的使用，实现功能，选择哪一张图片，显示哪一张
原文地址：http://www.cnblogs.com/lyxcode/p/7707861.html