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>
