js實現(xiàn)圖片和鏈接文字同步切換特效的方法
更新時間：2015年02月20日 15:29:07 作者：代碼家園
這篇文章主要介紹了js實現(xiàn)圖片和鏈接文字同步切換特效的方法,涉及javascript操作文字及圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)圖片和鏈接文字同步切換特效的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<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://m.fzitv.net";
imgTz[1]="<a href=#><font color=white>文字鏈接內(nèi)容一 紅葉傳情</font></a>";
imgUrl[2]="/images/m02.jpg";
imgLink[2]="http://m.fzitv.net";
imgTz[2]="<a href=#><font color=white>文字鏈接內(nèi)容二 野花綻放</font></a>";
imgUrl[3]="/images/m03.jpg";
imgLink[3]="http://m.fzitv.net";
imgTz[3]="<a href=#><font color=white>文字鏈接內(nèi)容三 往事如茶</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>
<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://m.fzitv.net";
imgTz[1]="<a href=#><font color=white>文字鏈接內(nèi)容一 紅葉傳情</font></a>";
imgUrl[2]="/images/m02.jpg";
imgLink[2]="http://m.fzitv.net";
imgTz[2]="<a href=#><font color=white>文字鏈接內(nèi)容二 野花綻放</font></a>";
imgUrl[3]="/images/m03.jpg";
imgLink[3]="http://m.fzitv.net";
imgTz[3]="<a href=#><font color=white>文字鏈接內(nèi)容三 往事如茶</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程序設計有所幫助。
相關文章
在JavaScript中實現(xiàn)前端圖片上傳即時預覽功能是一項常見的需求,特別是在網(wǎng)頁交互設計中,這篇文章主要給大家介紹了關于前端實現(xiàn)圖片或視頻預覽的三種方法,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了javascript常用函數(shù)，再來15個常用函數(shù)，都具有很高的實用性，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要為大家詳細介紹了JS實現(xiàn)電商放大鏡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
下面小編就為大家?guī)硪黄粋€極為簡單的requirejs實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
本文主要關注V8的性能優(yōu)化，部分內(nèi)容并不適用于所有JS引擎。最后，轉(zhuǎn)載請注明出處2014-08-08
一旦你得到了表示窗口的變量，你就能通過各種方法來操縱它。下面介紹一下對窗口的各種操作2013-06-06
這篇文章主要為大家詳細介紹了原生JS發(fā)送異步數(shù)據(jù)請求的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
layui技巧：下拉框未展示問題;下拉框的onchange事件處理;關閉彈出層,重新加載父頁面;父頁面如何傳遞參數(shù)給彈出層的iframe頁面;表單元素處于禁用狀態(tài);表單提交如何獲取表單元素值集合;數(shù)據(jù)表格固定列;帶搜索的下拉框;表單提交阻止頁面跳轉(zhuǎn);父頁面和子窗口傳遞值2024-07-07
前端的初學者在學習Javascript中this指向的時候經(jīng)常都會一頭霧水,尤其是在ES6箭頭函數(shù)出現(xiàn)之前,所以本篇文章主要是介紹和總結(jié)了各種情況下的this指向,希望對大家有所幫助2023-12-12
bootstrap table 表格中增加下拉菜單末行出現(xiàn)滾動條的快速解決方法
這篇文章主要介紹了bootstrap table 表格中增加下拉菜單末行出現(xiàn)滾動條的解決方法,需要的朋友可以參考下2017-01-01