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