웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
▩물결 처럼 흐르는 것같은 이미지 슬라이드 쇼
2002.02.28 19:55
==========================================================
예제보기: http://my.dreamwiz.com/dong0987/study24.htm
==========================================================
=================================================
<body> 와 </body> 에 삽입합니다.
=================================================
<SCRIPT LANGUAGE="JavaScript">
<!--
// 이미지 주소 넣기.
var imgsname = new Array()
imgsname[0]="http://dong0987.nayes.net/zboard/data/test/korea.gif"
imgsname[1]="http://dong0987.nayes.net/zboard/data/test/time.gif"
imgsname[2]="http://dong0987.nayes.net/zboard/data/test/hy.gif"
// 이미지별 링크를 설정
var imgsurl = new Array()
imgsurl[0]="http://yoonmi.waa.to"
imgsurl[1]="http://yoonmi.waa.to"
imgsurl[2]="http://yoonmi.waa.to"
// 타겟을 설정 var linktarget="_blank"
// 시간간격을 설정var pause=3
// 이미지의 위치를 설정
var posleft=10
var postop=10
var contentimage=""
var i_image=0
var i_stepwave=0
var i_maxstepwave=40
var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgsname[i]
}
pause=pause*1000
function initiate() {
contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
if (document.all) {
waveimage.innerHTML=contentimage
waveimage.style.posLeft=posleft
waveimage.style.posTop=postop
enlargewave()
}
if (document.layers) {
document.waveimage.left=posleft
document.waveimage.top=postop
changeimage()
}
}
function enlargewave() {
if (i_stepwave<=i_maxstepwave) {
waveimage.filters.wave.phase=i_stepwave
waveimage.filters.wave.strength=i_stepwave
waveimage.filters.wave.lightstrength=i_stepwave
waveimage.filters.wave.freq=i_stepwave
i_stepwave++
var timer=setTimeout("enlargewave()",50)
}
else {
clearTimeout(timer)
changeimage()
}
}
function reducewave() {
if (i_stepwave>0) {
waveimage.filters.wave.phase=i_stepwave
waveimage.filters.wave.strength=i_stepwave
waveimage.filters.wave.lightstrength=i_stepwave
waveimage.filters.wave.freq=i_stepwave
i_stepwave--
var timer=setTimeout("reducewave()",50)
}
else {
clearTimeout(timer)
var timer=setTimeout("enlargewave()",pause)
}
}
function changeimage() {
i_image++
if (i_image>=imgsname.length) {i_image=0}
contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
if (document.all) {
waveimage.innerHTML=contentimage
reducewave()
}
if (document.layers) {
document.waveimage.document.write(contentimage)
document.waveimage.document.close()
var timer=setTimeout("changeimage()",pause)
}
}
if (document.all) {
document.write('<DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>')
}
if (document.layers) {
document.write('<LAYER NAME="waveimage"></LAYER>')
document.close()
}
window.onload=initiate
// --->
</SCRIPT>
예제보기: http://my.dreamwiz.com/dong0987/study24.htm
==========================================================
=================================================
<body> 와 </body> 에 삽입합니다.
=================================================
<SCRIPT LANGUAGE="JavaScript">
<!--
// 이미지 주소 넣기.
var imgsname = new Array()
imgsname[0]="http://dong0987.nayes.net/zboard/data/test/korea.gif"
imgsname[1]="http://dong0987.nayes.net/zboard/data/test/time.gif"
imgsname[2]="http://dong0987.nayes.net/zboard/data/test/hy.gif"
// 이미지별 링크를 설정
var imgsurl = new Array()
imgsurl[0]="http://yoonmi.waa.to"
imgsurl[1]="http://yoonmi.waa.to"
imgsurl[2]="http://yoonmi.waa.to"
// 타겟을 설정 var linktarget="_blank"
// 시간간격을 설정var pause=3
// 이미지의 위치를 설정
var posleft=10
var postop=10
var contentimage=""
var i_image=0
var i_stepwave=0
var i_maxstepwave=40
var imgpreload=new Array()
for (i=0;i<=imgsname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgsname[i]
}
pause=pause*1000
function initiate() {
contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
if (document.all) {
waveimage.innerHTML=contentimage
waveimage.style.posLeft=posleft
waveimage.style.posTop=postop
enlargewave()
}
if (document.layers) {
document.waveimage.left=posleft
document.waveimage.top=postop
changeimage()
}
}
function enlargewave() {
if (i_stepwave<=i_maxstepwave) {
waveimage.filters.wave.phase=i_stepwave
waveimage.filters.wave.strength=i_stepwave
waveimage.filters.wave.lightstrength=i_stepwave
waveimage.filters.wave.freq=i_stepwave
i_stepwave++
var timer=setTimeout("enlargewave()",50)
}
else {
clearTimeout(timer)
changeimage()
}
}
function reducewave() {
if (i_stepwave>0) {
waveimage.filters.wave.phase=i_stepwave
waveimage.filters.wave.strength=i_stepwave
waveimage.filters.wave.lightstrength=i_stepwave
waveimage.filters.wave.freq=i_stepwave
i_stepwave--
var timer=setTimeout("reducewave()",50)
}
else {
clearTimeout(timer)
var timer=setTimeout("enlargewave()",pause)
}
}
function changeimage() {
i_image++
if (i_image>=imgsname.length) {i_image=0}
contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"
if (document.all) {
waveimage.innerHTML=contentimage
reducewave()
}
if (document.layers) {
document.waveimage.document.write(contentimage)
document.waveimage.document.close()
var timer=setTimeout("changeimage()",pause)
}
}
if (document.all) {
document.write('<DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>')
}
if (document.layers) {
document.write('<LAYER NAME="waveimage"></LAYER>')
document.close()
}
window.onload=initiate
// --->
</SCRIPT>
댓글 2
-
안현태
2003.04.27 10:43
구문오류가 많이 뜬다. -
핑크푸딩
2006.10.14 08:21
안됨 퍼 오셧나......
제목 | 글쓴이 | 날짜 |
---|---|---|
self.close 묻지 않고 닫기 [6] | REAL | 2003.04.09 |
테이블에 dot 효과를 주자~~~~~~~~~~~~~~~~~~~~ [5] | 조일현 | 2003.04.08 |
스스로 사라지는 웹페이지 만들기 [3] | 최재철 | 2003.04.08 |
노프레임홈페이지 디비기 4 - 쌍벽 [36] | 리디 | 2003.04.08 |
HTML 기본 구성 ( HTML 왕초보만 보세혀.. ) [7] | kkaza™ | 2003.04.05 |
홈페이지의 위아래를 바꾸어 보자! [10] | 세죠위그이 | 2003.04.01 |
노프레임홈페이지 디비기 3 - 경로 [42] | 리디 | 2003.03.31 |
쭘's식 홈페이지 만들기 No.2 - 예제 미리보기 포함 [14] | 쭘's | 2003.03.30 |
노프레임홈페이지 디비기 2 - 헤더와 풋터 [57] | 리디 | 2003.03.26 |
펼침 목록 메뉴 만들기! (나모) - 쭘's [8] | 쭘's | 2003.03.25 |
노프레임홈페이지 디비기 1 - 계층 [16] | 리디 | 2003.03.25 |
HTML의 정의 [8] | 이태운 | 2003.03.23 |
쭘's 식 쉽게 홈페이지 만들기 [15] | 쭘's | 2003.03.17 |
캐시 사용하지 않기 [5] | FriZeX*-_-* | 2003.03.17 |
[HTML 초보자] 열거목록에 대한 스타일정의 네번째 마지막 | ZipShin | 2003.03.17 |
[나모] CSS 만들기 III | 쭘's | 2003.03.12 |
[나모] CSS 만들기 II | 쭘's | 2003.03.12 |
[나모] CSS 만들기 I | 쭘's | 2003.03.12 |
[나모] 책갈피 만들기 [5] | 쭘's | 2003.03.12 |
[HTML 초보자] 열거목록에 대한 스타일정의 세번째 | ZipShin | 2003.03.12 |