您的位置：首页 > 其它

图片交替显示及鼠标滑过更换图片

2016-06-03 17:53 253 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片交替显示及鼠标滑过更换图片</title>
</head>
<body>
<!-- 鼠标滑过更换图片star -->
<h1>鼠标滑过更换图片:</h1>
<img border="0" src="http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320" name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" />
<script type="text/javascript">
function mouseOver(){
document.b1.src="http://hbimg.b0.upaiyun.com/a9adb8b7d90c1f0618a67875641d46d9ac761e081c7a8-hbx5Qh_sq320"
}
function mouseOut(){
document.b1.src="http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320"
}
</script>
<!-- 鼠标滑过更换图片 end -->

<br>

<!-- 交替显示图片 star -->
<h1>交替显示图片：</h1>
<img src="http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320" id="imgs" />
<script language="javascript">
setInterval(test,2000);
var array=new Array();
var index=0;
var array= new Array("http://hbimg.b0.upaiyun.com/57576941bed4143eb2643ee9f23c597b7f6b1b69180cc-Ct89Yv_sq320","http://hbimg.b0.upaiyun.com/a9adb8b7d90c1f0618a67875641d46d9ac761e081c7a8-hbx5Qh_sq320");
function test()
{ var myimg=document.getElementById("imgs");
if(index==array.length-1)
{ index=0; }else{ index++; }
myimg.src=array[index];
}
</script>
<!--  交替显示图片 end -->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片

相关文章推荐

新的分享

章节导航