javascript 图片轮换

<!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" />
<title>Erit 图片轮换</title>
<script type="text/javascript">
	window.onload = function (){
		document.getElementById("compen1").src = "03.png";
		transmigrate(0);
	};
	
	function getIndex(arr,id){
		var j = 0;
		for (var i = 0;i < arr.length;i++){
			if (arr[i].id != id){
				j++;
			} else {
				break;
			}
		}
		return j;
	}
	
	function transmigrate(s){
		var ImgArr = document.getElementsByName("compen");
		var imgContent = document.getElementById("compen1");
		var step = 2000;
		var l = ImgArr.length;
		var i = s;
		var timer = null;
		
		(function (){
			if (i < l){
				imgContent.src = ImgArr[i].src;
				timer = setTimeout(arguments.callee,step);
				i++;
			} else {
				transmigrate(0);
			}
		})();
		
		var k = 0;
		for (var j = 0;j < l;j++){
			ImgArr[j].onmouseover = function (){
				imgContent.src = this.src;
				clearTimeout(timer);
			}
			
			ImgArr[j].onmouseout = function (){
				k = getIndex(ImgArr,this.id);
				transmigrate(k);
			}
		}
	}
</script>
</head>

<body>
	<table width="829" height="440" border="0" align="center">
  <tr>
    <td width="331" rowspan="4" align="center"><img id="compen1"/></td>
    <td width="273" rowspan="4" valign="top">&nbsp;</td>
    <td width="211" height="113" align="center"><img id="compen2" name="compen" src="03.png" width="140" height="110" /></td>
  </tr>
  <tr>
    <td height="110" align="center"><img id="compen3" name="compen" src="04.png" width="140" height="110" /></td>
  </tr>
  <tr>
    <td align="center"><img src="05.png" id="compen4" name="compen" width="140" height="110" /></td>
  </tr>
  <tr>
    <td align="center"><img id="compen5" src="06.png" name="compen" width="140" height="110" /></td>
  </tr>
</table>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值