이 기사에서는 이미지 재생의 점진적인 표시를 실현하기위한 JavaScript 방법을 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
다음과 같이 코드를 복사하십시오. <html>
<title> Picture Loop은 점차 재생 효과 코드를 표시합니다 </title>
<헤드>
<!-1. HEML의 <head> </head> 사이에 다음 코드를 삽입하십시오 : ->.
<스크립트 언어 = javaScript>
<!-//
sandra0 = 새로운 이미지 ();
sandra0.src = "/images/m01.jpg";
sandra1 = 새로운 이미지 ();
sandra1.src = "/images/m02.jpg";
sandra2 = 새로운 이미지 ();
sandra2.src = "/images/m03.jpg";
var i_strngth = 1
var i_image = 0
var imageUrl = 새로운 배열 ()
imageUrl [0] = "/images/m01.jpg"
imageUrl [1] = "/images/m02.jpg"
imageUrl [2] = "/images/m03.jpg"
함수 showImage () {
if (document.all) {
if (i_strngth <= 110) {
readimage.innerhtml = "<img style = '필터 : alpha (opacity ="+i_strngth+")'src ="+imageUrl [i_image]+"border = 0>";
i_strngth = i_strngth+10
var timer = settimeout ( "showImage ()", 100)
}
또 다른 {
클리어 타임 아웃 (타이머)
var timer = settimeout ( "hideimage ()", 1000)
}
}
if (document.layers) {
클리어 타임 아웃 (타이머)
document.testimage.document.write ( "<img src ="+imageUrl [i_image]+"border = 0>")
document.close ()
i_image ++
if (i_image> = imageUrl.length) {i_image = 0}
var timer = settimeout ( "showimage ()", 2000)
}
}
함수 hideimage () {
if (i_strngth> = -10) {
readimage.innerhtml = "<img style = '필터 : alpha (opacity ="+i_strngth+")'src ="+imageUrl [i_image]+"border = 0>";
i_strngth = i_strngth-10
var timer = settimeout ( "hideimage ()", 100)
}
또 다른 {
클리어 타임 아웃 (타이머)
i_image ++
if (i_image> = imageUrl.length) {i_image = 0}
i_strngth = 1
var timer = settimeout ( "showimage ()", 500)
}
}
//->
</스크립트>
</head>
<body>
<!-2. <body> 문을 다음과 같이 수정하십시오.->
<body onload = "showImage ()">
<!-3. HEML의 <hody> </body>에 다음 코드를 추가하십시오 : 상단 : 120px; 왼쪽 : 240px는 디스플레이 위치를 설정할 수 있습니다->
<div id = "증언"스타일 = "위치 : 절대; 가시성 : 가시; 상단 : 120px; 왼쪽 : 240px"> </div>
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.