ホームページ  >  記事  >  ウェブフロントエンド  >  画像間の同期切り替え効果を実現するための js メソッドと text_javascript スキルのリンク

画像間の同期切り替え効果を実現するための js メソッドと text_javascript スキルのリンク

WBOY
WBOYオリジナル
2016-05-16 16:13:171252ブラウズ

この記事の例では、js を使用して画像とリンク テキスト間の同期切り替え効果を実現する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:

JS 画像とリンクテキストの同期切り替え効果
<頭>
<スクリプト言語=JavaScript>
var imgUrl=新しい配列();
var imgLink=new Array();
var imgTz=新しい配列();
var adNum=0;
imgUrl[1]="/images/m01.jpg";
imgLink[1]="http://www.jb51.net";
imgTz[1]="テキスト リンク コンテンツ 1 紅葉ティーザー";
imgUrl[2]="/images/m02.jpg";
imgLink[2]="http://www.jb51.net";
imgTz[2]="テキスト リンク コンテンツ 2 つの野の花が咲きました";
imgUrl[3]="/images/m03.jpg";
imgLink[3]="http://www.jb51.net";
imgTz[3]="テキスト リンク コンテンツ 3 過去はお茶のよう";
var j=0;
for (i=1;i if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
j ;
} else {
休憩;
}
}
関数 playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var key=0;
関数 nextAd(){
if(adNum それ以外の場合 adNum=1;
if( key==0 ){
キー=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);
}
関数 goUrl(){
JumpUrl=imgLink[adNum];
JumpTarget='_blank';
if (jumpUrl != ''){
if (jumpTarget != '')
window.open(jumpUrl,jumpTarget);
それ以外
location.href=jumpUrl;
}
}





この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。