JS实现图片变换效果

最近一直在写JS+CSS+DIV的东西

下面介绍一下JS比较常用的一个功能

js核心代码:

<script language="javascript">
//键盘监听事件
document.onkeydown = onkey;
//五个按钮循环
var classIndex = 0 ;
var classCount = 5;

isselected = false;
var url = null;
function onkey(e)
{

	ev = window.event ? event : e;
	key = ev.which ? ev.which : ev.keyCode;
	switch(key)
	{
		case 37://左
		 			
			break;
		
		case 39://右
		 		
			break;
	
		case 38: //上
		 			if(classIndex>0){
				classIndex = classIndex -1;
			}else if(classIndex<=0){
				classIndex = classCount - 1;
			}
			changeImgEvt();
			isselected = false;
			break;
		
		case 40://下
		          if(classIndex<classCount-1){
				classIndex += 1;
			}else if(classIndex>=classCount-1){
				classIndex = 0 ;
			}
			changeImgEvt();
			isselected = false;
		    break;
		
		case 13://选中链接地址
			if(url!=null&&url!=''){
				location.href = url;
			}else{
				location.href ="";
			}
			
		 	isselected = false;		
			break;
		      		
		case 340:
			iPanel.back();
			break;
	
		default:
			isselected = false;
			break;
	}
}


function changeImgEvt(){
	var sectFlag = false;
	var c_index = classIndex + 1;
	
	 
	for(var i=0;i<5;i++){
		$('menu'+(i+1)).style.visibility='hidden';
	}
	if(c_index==1){//选中第一个按钮
		$('contextImg').src='换成图片1地址';
	}else if(c_index==2){//选中第二个按钮
		$('contextImg').src='换成图片2地址'';
	}else if(c_index==3){//选中第三个按钮
		$('contextImg').src='换成图片3地址'';
	}else if(c_index==4){//选中第四个按钮
		$('contextImg').src='换成图片4地址'';
	}else if(c_index==5){//个选中第五个按钮
		$('contextImg').src='换成图片5地址'';
	}
	$('menu'+c_index).style.visibility='visible';
	sectFlag = true;
	if(sectFlag){
		goHrefPageEvt(c_index);
	}
	
}


function goHrefPageEvt(c_index){
	 
	if(c_index==1){//跳转
		url ="选中图片1将要跳转的地址";
		 
	}else if(c_index==2){//跳转
		url ="选中图片2将要跳转的地址";
	}else if(c_index==3){//休闲游戏
		url ="选中图片3将要跳转的地址";
	}else if(c_index==4){
		url = "选中图片4将要跳转的地址";
	}else if(c_index==5){
		url ="";		
		 	}
	 }

function $(eleName){
	return document.getElementById(eleName);
}
</script>

 

 

页面核心代码

<div style="align:center;width:1280px;height:720px;border:0px solid red;">
		<div style="width:1280px;height:720px;border:0px solid red;background-image: url('background.jpg');">
			<div style="text-align:left;margin-left:112px;">
			<table style="border:0px solid red;width:1100px;height:720px;">
				<tr>
					<td style="border:0px solid red;width:310px;">
						<div style="margin-top:58px;">
							&ldquo;<img id="menu1" src="1.jpg"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu2" src="2.jpg" style="visibility: hidden;"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu3" src="3.jpg" style="visibility: hidden;"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu4" src="4.jpg" style="visibility: hidden;"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu5" src="5.jpg" style="visibility: hidden;"/>
						</div>
					</td>
					<td style="border:0px solid red;vertical-align: top;">
						 
						 <div style="margin-left:60px;margin-top:88px;">
						  <marquee  border="0" direction="left"  height="95px" width="660px" scrollDelay="50"  scrollamount="3"  style="padding: 0px;"> 
								  <font size="9px" color="white">滚动文字</font>
                                  </marquee> 
							
						</div>
						<div style="margin-left:60px;margin-top:10px;">
							<img id="contextImg" src="1.jpg" />
						<div>
						 					</td>
				</tr>
			</table>
			</div>
		</div>	
	</div>