有20张照片怎么利用JS 和HTML 把他播放出来要求5秒自动换下一张显示出来
利用JAVASCRIPT
- 提问者网友:呐年旧曙光
- 2021-07-29 03:06
- 五星知识达人网友:慢性怪人
- 2021-07-29 03:51
http://www.lanrentuku.com/js/d463.zip
下载这个自动换下一张显示出来,有20张图片,你就把图片宽度和代码加宽点。
- 1楼网友:玩家
- 2021-07-29 05:45
<script> //-----WNum 为图片宽度 //-----HNum 为图片高度 //-----TNum 为文字高度(可为空 ,即不显示) function go_Img(WNum,HNum,TNum){ Go_Num=(imgUrl.length-1);key=0;adNum=0;theTimer=''; var C_lass; var $=function $(str){return document.write(str);}; var C_ss="<style>"; C_ss=C_ss+"div{overflow:hidden;}"; C_ss=C_ss+".W_Ord{overflow;hidden;text-align:center;color:#F00;font-weight:bold;clear:both;width:"+WNum+"px;height:"+TNum+";background-color:#eee;}"; C_ss=C_ss+".Min_On{color:#fff;Float:right;background-color:#f00;cursor:pointer;width:30px;height:20px;padding-top:1px;border:1px solid #f60;text-align:center;font-weight:bold;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;}"; C_ss=C_ss+".Min_Off{color:#fff;Float:right;cursor:pointer;width:30px;height:20px;padding-top:1px;border-left:1px solid #eee;border-right:1px solid #eee;margin-left:-1px;text-align:center;font-weight:bold;}"; C_ss=C_ss+"</style>"; $(C_ss);C_ss=''; $("<Div +WNum+"px;height:"+HNum+"px;border:1px solid #eee;'>"); $("<div +WNum+"px;height:"+HNum+"px;'><img +WNum+"px;height:"+HNum+"px;' src='"+imgUrl[1]+"' name=imgInit onclick=go_Url();></Div>"); $("<div class='Rig' +WNum+"px;height:20px;margin-top:-20px;'>"); for (var i=100;i>0 ;i=i-2){ $("<Div +i/2+");-moz-opacity:0."+i/20+";opacity: 0."+i/20+"; '> </Div>"); } $("</Div>"); $("<Div class='Rig' +WNum+"px;height:"+HNum+"px;margin-top:-20px;'>"); for (var j=Go_Num;j>0 ;j--){ if (j==1){C_lass='Min_On';}else{C_lass='Min_Off';} $("<Div Id='Min"+j+"' class='"+C_lass+"' onmouseover=nextAd("+j+");>"+j+"</Div>"); } $("</Div>"); $("</Div>"); if (TNum && TNum!=''){ $("<Div Id='W_Ord' class='W_Ord'>"+imgWord[1]+"</Div>"); } nextAd(1); } function nextAd(GetNum){ var O=function O(objid){return document.getElementById(objid);} adNum=adNum%Go_Num; adNum++ ; if(GetNum!=undefined && GetNum!=0){adNum=GetNum;} if(key==0){key=1;} else if(document.all){ imgInit.filters.revealTrans.Transition=23; imgInit.filters.revealTrans.apply(); imgInit.filters.revealTrans.play(); if (document.all.W_Ord!=undefined){document.all.W_Ord.innerHTML=imgWord[adNum];} for (var i=1;i<(Go_Num+1);i++ ){O('Min'+i).className='Min_Off';} O('Min'+adNum).className='Min_On'; } document.images.imgInit.src=imgUrl[adNum]; if (GetNum==undefined){theTimer=setTimeout(nextAd, 6000);} else{clearTimeout(theTimer);theTimer=setTimeout(nextAd, 6000);} } function go_Url(jumpTarget){ jumpUrl=imgLink[adNum]; jumpTarget='_blank'; //_blank if (jumpUrl != ''){ if (jumpTarget != '') window.open(jumpUrl,jumpTarget); else location.href=jumpUrl; } } </script>
<script> //-------建产数组 var imgUrl=new Array(); var imgLink=new Array(); var imgWord=new Array(); imgUrl[1]=' http://hfxhyy.35hf.cn/back/UpPic/8vzrlf5v1czut.jpg'; imgLink[1]=' http://hfxhyy.35hf.cn/Object.asp?StrId=20'; imgWord[1]='Six信息'; imgUrl[2]=' http://hfxhyy.35hf.cn/back/UpPic/q6hxyzon6by4b.jpg'; imgLink[2]=' http://hfxhyy.35hf.cn/Object.asp?StrId=18'; imgWord[2]='Five'; imgUrl[3]=' http://hfxhyy.35hf.cn/back/UpPic/kdiqte-0rune7.jpg'; imgLink[3]='/Object.asp?StrId=17'; imgWord[3]='Four'; imgUrl[4]=' http://hfxhyy.35hf.cn/back/UpPic/mrocr4k8v1f40.jpg'; imgLink[4]=' http://hfxhyy.35hf.cn/Object.asp?StrId=16'; imgWord[4]='Three'; imgUrl[5]=' http://hfxhyy.35hf.cn/back/UpPic/rsba4jy1m7mf6.jpg'; imgLink[5]=' http://hfxhyy.35hf.cn/Object.asp?StrId=15'; imgWord[5]='Two'; imgUrl[6]=' http://hfxhyy.35hf.cn/back/UpPic/ttqnfeij7_d8p.jpg'; imgLink[6]=' http://hfxhyy.35hf.cn/Object.asp?StrId=14'; imgWord[6]='one';
// 调用方法 go_Img(290,205,20); //-----------------------------调用方法 </script>
- 2楼网友:深街酒徒
- 2021-07-29 04:13
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>图片的切换效果</TITLE> <SCRIPT language="javascript"> function InitImage( ) { document.getElementById("gameTab2").style.display="none"; document.getElementById("game").style.display="none"; document.getElementById("mobileTab1").style.display="none"; } function showGame( ) { document.getElementById("gameTab1").style.display="none"; document.getElementById("gameTab2").style.display="block"; document.getElementById("game").style.display="block"; document.getElementById("mobile").style.display="none"; document.getElementById("mobileTab2").style.display="none"; document.getElementById("mobileTab1").style.display="block";
}
function showMobile( ) { document.getElementById("gameTab1").style.display="block"; document.getElementById("gameTab2").style.display="none"; document.getElementById("game").style.display="none"; document.getElementById("mobile").style.display="block"; document.getElementById("mobileTab2").style.display="block"; document.getElementById("mobileTab1").style.display="none";
}
</SCRIPT> </HEAD>
<BODY onLoad="InitImage( )"> <TABLE border="0" align="center" cellpadding="0" cellspacing="0"> <TR> <TD><IMG id="gameTab1" src="images/gameTab1.jpg" width="83" height="47" onMouseOver="showGame()"> <IMG id="gameTab2" src="images/gameTab2.jpg" width="83" height="49"></TD> <TD><IMG id="mobileTab1" src="images/mobileTab1.jpg" width="81" height="49" onMouseOver="showMobile()" > <IMG id="mobileTab2" src="images/mobileTab2.jpg" width="82" height="47"></TD> </TR> <TR> <TD colspan="2"><IMG id="mobile" src="images/mobile.jpg" width="165" height="171"><IMG id="game" src="images/game.jpg" width="164" height="169" ></TD> </TR> <TR> <TD colspan="2"><IMG src="images/fly.jpg" width="165" height="43"></TD> </TR> </TABLE> </BODY> </HTML>