這篇文章主要介紹了js實現圖片和鏈接文字同步切換特效的方法,涉及javascript操作文字及圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js實現圖片和鏈接文字同步切換特效的方法。分享給大家供大家參考。具體實現方法如下：
代碼如下:
<html>
<title>js圖片和鏈接文字同步切換特效</title>
<head>
<script language=JavaScript>
var imgUrl=new Array();
var imgLink=new Array();
var imgTz=new Array();
var adNum=0;
imgUrl[1]="/images/m01.jpg";
imgLink[1]="http://www.jb51.net";
imgTz[1]="<a href=#><font color=white>文字鏈接內容一 紅葉傳情</font></a>";
imgUrl[2]="/images/m02.jpg";
imgLink[2]="http://www.jb51.net";
imgTz[2]="<a href=#><font color=white>文字鏈接內容二 野花綻放</font></a>";
imgUrl[3]="/images/m03.jpg";
imgLink[3]="http://www.jb51.net";
imgTz[3]="<a href=#><font color=white>文字鏈接內容三 往事如茶</font></a>";
var j=0;
for (i=1;i<=3;i++) {
if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
j++;
} else {
break;
}
}
function playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
function nextAd(){
if(adNum<j)adNum++ ;
else adNum=1;
if( key==0 ){
key=1;
} else if (document.all){
imgInit.filters.revealTrans.Transition=6;
imgInit.filters.revealTrans.apply();
playTran();
}
document.images.imgInit.src=imgUrl[adNum];
document.getElementById('jdtz').innerHTML=imgTz[adNum];
theTimer=setTimeout("nextAd()", 3000);
}
function goUrl(){
jumpUrl=imgLink[adNum];
jumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
else
location.href=jumpUrl;
}
}
</script>
</head>
<body>
<table><tr><td> <a href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=2,transition=20); border=0" src="javascript:nextAd()" width=320 height=240 border=0 name=imgInit></a> </td></tr><tr><td id=jdtz bgcolor="blue"></td></tr></table>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。