您的位置：首页 > 其它
用src属性动态替换图片；图片预加载---鼠标事件实现图片翻转效果；随机显示图片和onClick事件

2012-08-16 16:13 806 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mian.css"/>
<title>用src属性动态替换图片；图片预加载---鼠标事件实现图片翻转效果；随机显示图片和onClick事件</title>
<script type="text/javascript">
/*************************用src属性动态替换图片************************/
var myImages=new Array("images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"); //创建数组，包含4张图片
index_val=0; //把数组的索引值赋值给index_val
function next_image(){
index_val++; //增加一次数组索引会访问数组下一张图片，数组的初始索引是0，把这个值赋给index_val，index_val++也就是变成index_val=1，相对应数组的2.jpg
if(index_val<myImages.length){ //index_val的索引值小于数组的长度就会进入语句块，循环显示新的图片
document.images["babypic"].src=myImages[index_val]; //通过图片babypic的src属性来替换图片，index_val对应数组的图片
}
else{ //如果到达数组的最大长度，会执行else语句块，把数组索引重置为0
index_val=0;
document.images["babypic"].src=myImages[index_val];
}
}
function previous_image(){
index_val--;
if(index_val>=0){
document.images["babypic"].src=myImages[index_val];
}
else{
index_val=myImages.length-1;
document.images["babypic"].src=myImages[index_val];
}
}

/*************************图片预加载---鼠标事件实现图片翻转效果*********************************/
function preLoadImages(){
baby=new Array();
baby[0]=new Image(); //用Image()创建并加载一个新image对象，并赋值给baby数组的第一个元素
baby[0].src="images/1.jpg";
baby[1]=new Image();
baby[1].src="images/2.jpg";
}

/*****************************************随机显示图片和onClick事件************************************************/
ImageHome=new Array(3);
for(var i=0;i<3;i++){
ImageHome[i]=new Image();
} //Image函数预加载并缓存3张图片
ImageHome[0].src="images/2.jpg";
ImageHome[1].src="images/3.jpg";
ImageHome[2].src="images/4.jpg";
function myRandom(){
var n=ImageHome.length-1; //定义变量n，值为图片数组的长度减1
var randnum=Math.floor(Math.random()*(n+1)); //用Math对象的random方法产生1-3的随机整数。
document.images["display"].src=ImageHome[randnum].src; //名为display的图片src会被随机生成的数组src替换，从而达到随机显示图片
}

</script>
</head>

<body onload="preLoadImages();"> <!--页面加载是onLoad事件被触发，调用preLoadImages()函数先将图片预先加载-->
<div align="center">
<h2>用src属性动态替换图片</h2>
<img src="images/1.jpg" name="babypic" />
<br/>
<a href="javascript:previous_image()">上一张图片</a>  <a href="javascript:next_image()">下一张图片</a>
</div>

<div align="center">
<h2>图片预加载---鼠标事件实现图片翻转效果</h2>
<a href="#" onMouseOver="document.willy.src=baby[1].src;" onMouseOut="document.willy.src=baby[0].src;"><img name="willy" src="images/1.jpg"/></a>
</div>

<div align="center">
<h2>随机显示图片和onClick事件</h2>
<img name="display" src="images/1.jpg" />
<p><form><input type="button" value="点击会随机显示图片" onClick="myRandom()"/></form></p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航