<!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" οnmοuseοver="mouseOver()" οnmοuseοut="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>圖片交替顯示及鼠標滑過更換圖片
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章