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>