用src属性动态替换图片;图片预加载---鼠标事件实现图片翻转效果;随机显示图片和onClick事件

 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>&nbsp;&nbsp;<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>

你可能感兴趣的:(onclick)