이 기사 예제는 JS가 Baidu Alliance에서 좋은 이미지 전환 효과를 어떻게 달성 할 수 있는지를 보여줍니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<title> JS는 Baidu Alliance에서 좋은 이미지 전환 효과를 깨닫습니다 </title>
<body>
<cript>
var links = new array ();
링크 [1] = "http://www.baidu.com/";
링크 [2] = "//www.vevb.com/";
링크 [3] = "http://www.sohu.com/";
링크 [4] = "http://sc.vevb.com/";
var imgs = new Array ();
for (var n = 1; n <= 5; n ++) imgs [n] = new image ();
IMGS [1] .src = "images/m01.jpg";
IMGS [2] .src = "images/m02.jpg";
IMGS [3] .src = "images/m03.jpg";
IMGS [4] .Src = "images/m04.jpg";
var tits = new Array ();
가슴 [1] = "바이두 검색";
가슴 [2] = "wulin.com";
가슴 [3] = "Sohu 홈페이지";
가슴 [4] = "재료 홈";
var imgwidth = 550; // 이미지 너비
var imgheight = 134; // 그림 너비
var str = "<스타일 유형 = 'text/css'>";
str += "#imgnv {display : none; 위치 : 절대; 하단; 하단 : -1px; 오른쪽 : 0; 높이 : 16px;}#imgnv div {float : 왼쪽; 마진 오른쪽 : 1px;}";
str += "#imgnv div.on,#imgnv div.off {margin-bottom : 1px; 너비 : 30px; 높이 : 15px; 라인-하이트 : 18px! 중요; 선-리이트 : 15px; 글꼴 크기 : 9px; 텍스트-알림 : 중심; 커서 : 포인터; 커서 : 핸드};
str += "#imgnv div.on {배경 :#ce0609; color : #fff; font-weight : bold}";
str += "#imgnv div.off {배경 :#323232; 컬러 : #fff; 텍스트 설명 : 없음}";
str += "#titnv {margin-top : 3px; color :#000; 텍스트-정렬 : 중심; 디스플레이 : none;}";
str += "</style>";
str += "<div style = '위치 : 상대'>";
str + = "<div> <a id = 'dlink'href = '" + 링크 [1] + "'target = '_ blank'> <img id = 'dimg'src = ' + imgs [1] .src +"'border = '0'width = ' + imgwidth + "'height = '' + imgheight +" 'syle ='syleat : alpha (oppacationy) ''0 ' onMouseOver = 'pause (true)'onmouseout = 'pause (false)'> </a> </div> ";
// 지점 1 : 내부 div 컨텐츠를 루핑하여 수를 늘리십시오.
str += "<div id = 'imgnv'> <div id = 'it1'class = 'on'onmouseover = 'imgswitch (1, true)'onmouseout = 'pause (false)'> 1 </div> <div id = 'it2'class = 'on onmouseOver ='imgswitch (2, true) 'onmouseout ='</div> </div. class = 'onmouseOver ='imgswitch (3, true) 'onMouseOut ='pause (false) '> 3 </div> <div id ='it4 'class ='off 'onmouseOver ='imgswitch (4, true) 'onMouseOut ='pause (false) '> 4 </div> ";
str + = "<div id = 'titnv'> <b>" + 가슴 [1] + "</b> </div>";
str += "</div>";
document.write (str);
var oi = document.getElementById ( "dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var 불투명도 = 100;
var 속도 = 15;
var Delay = (Document.all)? 400 : 700;
함수 setAlpha () {
if (document.all) {
if (oi.filters && oi.filters.alpha) oi.filters.alpha.opacity = 불투명;
}또 다른{
oi.style.mozopacity = ((불투명> = 100)? 99 : 불투명) / 100;
}
}
함수 imgswitch (id, p) {
if (p) {
일시 정지 = 참;
불투명도 = 100;
setalpha ();
}
oi.src = imgs [id] .src;
document.getElementById ( "dlink"). href = links [id];
document.getElementById ( "it" + lastId) .className = "Off";
document.getElementById ( "IT" + id) .className = "on";
documb
curid = lastid = id;
}
함수 scrollimg () {
if (pause && 불투명도> = 100) 반환;
if (sw == 0) {
불투명도 += 2;
if (불투명도> 지연) {불투명도 = 100; SW = 1; }
}
if (sw == 1) {
불투명도 -= 3;
if (불투명도 <10) {불투명도 = 10; SW = 3; }
}
setalpha ();
if (sw! = 3) 반환;
SW = 0;
커리드 ++;
// 지점 2 : 4 수정 숫자도 있습니다
if (curid> 4) curid = 1;
Imgswitch (Curid, False);
}
함수 일시 정지 {
일시 정지 = s;
}
함수 STARTSCROLL () {
setInterval (Scrollimg, Speed);
}
함수 checkload () {
if (imgs [1] .complete == true && imgs [2] .complete == true) {
ClearInterval (CheckId);
settimeout (StartsCroll, 2000);
}
}
var checkid = setInterval (Checkload, 10);
</스크립트>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.