> 웹 프론트엔드 > JS 튜토리얼 > 그림과 링크 text_javascript 기술 간의 동기 전환 효과를 달성하는 js 메소드

그림과 링크 text_javascript 기술 간의 동기 전환 효과를 달성하는 js 메소드

WBOY
풀어 주다: 2016-05-16 16:13:17
원래의
1258명이 탐색했습니다.

이 기사의 예에서는 js를 사용하여 사진과 링크 텍스트 간의 동기 전환 효과를 얻는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

JS 이미지 및 링크 텍스트 동기 전환 효과

<스크립트 언어=자바스크립트>
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]="텍스트 링크 콘텐츠 1 붉은 잎 티저";
imgUrl[2]="/images/m02.jpg";
imgLink[2]="http://www.jb51.net";
imgTz[2]="텍스트 링크 내용 두 개의 야생화가 피어있습니다";
imgUrl[3]="/images/m03.jpg";
imgLink[3]="http://www.jb51.net";
imgTz[3]="텍스트 링크 내용 3 과거는 차와 같습니다";
var j=0;
(i=1;i if( (imgUrl[i]!="") && (imgLink[i]!="") ) {
j ;
} 그 밖의 {
휴식;
}
}
함수 playTran(){
if (document.all)
imgInit.filters.revealTrans.play();
}
var 키=0;
함수 nextAd(){
if(adNum else adNum=1;
if( 키==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;
}
}





관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿