This article describes the method of synchronous switching effects of JS in image and link text. Share it for your reference. The specific implementation method is as follows:
Copy the code as follows: <html>
<title>JS pictures and link text synchronous switching effects</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]="//www.VeVB.COM";
imgTz[1]="<a href=#><font color=white>Text link content with red leaves</font></a>";
imgUrl[2]="/images/m02.jpg";
imgLink[2]="//www.VeVB.COM";
imgTz[2]="<a href=#><font color=white>Text link content: second wild flowers bloom</font></a>";
imgUrl[3]="/images/m03.jpg";
imgLink[3]="//www.VeVB.COM";
imgTz[3]="<a href=#><font color=white>Text link content three past events are like tea</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>
I hope this article will be helpful to everyone's JavaScript programming.