仿王者荣耀JS示例代码

JS代码如下：

/**
*
*/

var scroll_img=new Array();
for(var i=0;i<5;i++){
	scroll_img[i]="pic_scroll"+(i+1)+".jpeg";
}
var nowPic=2;
function loopShow(d1){
	nowPic=d1;
	document.getElementById("scroll_img").src=scroll_img[nowPic-1];
	for(var i=1;i<6;i++){
		if(nowPic==i){
			document.getElementById("scroll_number"+i).className="scroll_number_over";
		}else{
			document.getElementById("scroll_number"+i).className="scroll_number_out";
		}
	}
	if(nowPic>=5){
		nowPic=1;
	}else{
		nowPic++;
	}
}
setInterval("loopShow(nowPic)",2000);

var public_id=["pcu1","pcu2","pcu3","pcu4","pcu5"];
function Move(data,that){
	var public_nav=document.getElementsByClassName("public_nav")[0].getElementsByTagName("div");
	for(var i=0;i<5;i++){
		public_nav[i].style="color:#aaa;background-color:rgba(0,0,0,0);";
	}
	that.style="color:#f3c258;background-color:rgba(50,50,50,0.7);";
	for(var i=0;i<5;i++){
		if(public_nav[i]==data){
			document.getElementById(public_id[i]).className="content_block";
		}else{
			document.getElementById(public_id[i]).className="content_none";
		}
	}
	document.getElementById(data).className="content_block";
}

var games_id=["gcdiv1","gcdiv2","gcdiv3","gcdiv4","gcdiv5","gcdiv6","gcdiv7","gcdiv8"];
function gamesMove(data,that){
	var games_item_subnav=document.getElementsByClassName("games_item_subnav")[0].getElementsByTagName("div");
	for(var i=0;i<8;i++){
		games_item_subnav[i].style="color:#aaa;border-bottom:rgba(0,0,0,0) 3px solid;";
	}
	that.style="border-bottom:#f3c258 3px solid;color:black;";
	for(var i=0;i<8;i++){
		if(games_item_subnav[i]==data){
			document.getElementById(games_id[i]).className="content_block";
		}else{
			document.getElementById(games_id[i]).className="content_none";
		}
	}
	document.getElementById(data).className="content_block";
}

var contents_id=["item_t1","item_t2","item_t3"];
function contentsMove(data,that){
	var contents_item_subnav=document.getElementsByClassName("contents_item_subnav")[0].getElementsByTagName("div");
	for(var i=0;i<3;i++){
		contents_item_subnav[i].style="color:#aaa;border-bottom:rgba(0,0,0,0) 3px solid;";
	}
	that.style="border-bottom:#f3c258 3px solid;color:black;";
	for(var i=0;i<3;i++){
		if(contents_item_subnav[i]==data){
			document.getElementById(contents_id[i]).className="content_block";
		}else{
			document.getElementById(contents_id[i]).className="content_none";
		}
	}
	document.getElementById(data).className="content_block";
}

var herosskin_id=["heros_skin_contents1","heros_skin_contents2","heros_skin_contents3"];
function herosskinMove(data,that){
	var heros_skin_item_subnav=document.getElementsByClassName("heros_skin_item_subnav")[0].getElementsByTagName("div");
	for(var i=0;i<3;i++){
		heros_skin_item_subnav[i].style="color:#aaa;border-bottom:rgba(0,0,0,0) 3px solid;";
	}
	that.style="border-bottom:#f3c258 3px solid;color:black;";
	for(var i=0;i<3;i++){
		if(heros_skin_item_subnav[i]==data){
			document.getElementById(herosskin_id[i]).className="content_block";
		}else{
			document.getElementById(herosskin_id[i]).className="content_none";
		}
	}
	document.getElementById(data).className="content_block";
}

var titles1_id=["item_contents_1","item_contents_2","item_contents_3","item_contents_4","item_contents_5","item_contents_6",
"item_contents_7","item_contents_8"];
function title1Move(data,that){
	var item_contents1=document.getElementsByClassName("item_title1")[0].getElementsByTagName("div");
	for(var i=0;i<8;i++){
		item_contents1[i].style="color:black;background-color:#f5f5f5;";
	}
	that.style="color:white;background-color:#f3c258;";
	for(var i=0;i<8;i++){
		if(item_contents1[i]==data){
			document.getElementById(titles1_id[i]).className="content_block";
		}else{
			document.getElementById(titles1_id[i]).className="content_none";
		}
	}
	document.getElementById(data).className="content_block";
}

var titles2_id=["item_contents_9","item_contents_10","item_contents_11","item_contents_12","item_contents_13","item_contents_14",
"item_contents_15"];
function title2Move(data,that){
	var item_contents2=document.getElementsByClassName("item_title2")[0].getElementsByTagName("div");
	for(var i=0;i<7;i++){
		item_contents2[i].style="color:black;background-color:#f5f5f5;";
	}
	that.style="color:white;background-color:#f3c258;";
	for(var i=0;i<7;i++){
		if(item_contents2[i]==data){
			document.getElementById(titles2_id[i]).className="content_block";
		}else{
			document.getElementById(titles2_id[i]).className="content_none";
		}
	}
	document.getElementById(data).className="content_block";
}

HTML代码如下：

HTML代码https://blog.csdn.net/jasmyn518/article/details/121866535

CSS代码如下：

CSS代码https://blog.csdn.net/jasmyn518/article/details/121866617