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 <link rel="stylesheet" type="text/css" href="mian.css"/>
6 <title>用src属性动态替换图片；图片预加载---鼠标事件实现图片翻转效果；随机显示图片和onClick事件</title>
7 <script type="text/javascript">
8 /*************************用src属性动态替换图片************************/
9 var myImages=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"); //创建数组，包含4张图片
10 index_val=0; //把数组的索引值赋值给index_val
11 function next_image(){
12 index_val++; //增加一次数组索引会访问数组下一张图片，数组的初始索引是0，把这个值赋给index_val，index_val++也就是变成index_val=1，相对应数组的2.jpg
13 if(index_val<myImages.length){ //index_val的索引值小于数组的长度就会进入语句块，循环显示新的图片
14 document.images["babypic"].src=myImages[index_val]; //通过图片babypic的src属性来替换图片，index_val对应数组的图片
15 }
16 else{ //如果到达数组的最大长度，会执行else语句块，把数组索引重置为0
17 index_val=0;
18 document.images["babypic"].src=myImages[index_val];
19 }
20 }
21 function previous_image(){
22 index_val--;
23 if(index_val>=0){
24 document.images["babypic"].src=myImages[index_val];
25 }
26 else{
27 index_val=myImages.length-1;
28 document.images["babypic"].src=myImages[index_val];
29 }
30 }
31
32 /*************************图片预加载---鼠标事件实现图片翻转效果*********************************/
33 function preLoadImages(){
34 baby=new Array();
35 baby[0]=new Image(); //用Image()创建并加载一个新image对象，并赋值给baby数组的第一个元素
36 baby[0].src="images/1.jpg";
37 baby[1]=new Image();
38 baby[1].src="images/2.jpg";
39 }
40
41 /*****************************************随机显示图片和onClick事件************************************************/
42 ImageHome=new Array(3);
43 for(var i=0;i<3;i++){
44 ImageHome[i]=new Image();
45 } //Image函数预加载并缓存3张图片
46 ImageHome[0].src="images/2.jpg";
47 ImageHome[1].src="images/3.jpg";
48 ImageHome[2].src="images/4.jpg";
49 function myRandom(){
50 var n=ImageHome.length-1; //定义变量n，值为图片数组的长度减1
51 var randnum=Math.floor(Math.random()*(n+1)); //用Math对象的random方法产生1-3的随机整数。
52 document.images["display"].src=ImageHome[randnum].src; //名为display的图片src会被随机生成的数组src替换，从而达到随机显示图片
53 }
54
55
56 </script>
57 </head>
58
59 <body onload="preLoadImages();"> <!--页面加载是onLoad事件被触发，调用preLoadImages()函数先将图片预先加载-->
60 <div align="center">
61 <h2>用src属性动态替换图片</h2>
62 <img src="images/1.jpg" name="babypic" />
63 <br/>
64 <a href="javascript:previous_image()">上一张图片</a> <a href="javascript:next_image()">下一张图片</a>
65 </div>
66
67 <div align="center">
68 <h2>图片预加载---鼠标事件实现图片翻转效果</h2>
69 <a href="#" onMouseOver="document.willy.src=baby[1].src;" onMouseOut="document.willy.src=baby[0].src;"><img name="willy" src="images/1.jpg"/></a>
70 </div>
71
72 <div align="center">
73 <h2>随机显示图片和onClick事件</h2>
74 <img name="display" src="images/1.jpg" />
75 <p><form><input type="button" value="点击会随机显示图片" onClick="myRandom()"/></form></p>
76 </div>
77 </body>
78 </html>
