부드럽게 오버랩되는 이미지 슬라이드 쇼 입니다.

· 10년 전 · 901

<html>
<head>
<meta http-equiv=content-type content=text/html; charset=euc-kr>
</head>

<body>

<!---- 아래와 같은 방법으로 태그와 코드를 복사 해 넣으세요 --->

<script language="JavaScript1.2">
var slideshow_width=240 //이미지의 가로크기
var slideshow_height=225 //이미지의 높이
var pause=3000 //슬라이드 간의 시간 간격 (3000=3 seconds)

var fadeimages=new Array()

// 이미지들을 설정 하세요
fadeimages[0]="http://sir.co.kr/image/v9_lptitle.gif"
fadeimages[1]="http://sir.co.kr/image/logo.gif"
fadeimages[2]="http://sir.co.kr/bbs/skin/outlogin/v9/btn_modify.gif"

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
 else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
 tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
 crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
 crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>

<!--------------------------- 여기까지 ---------------------------->

</body>
</html>

|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
10년 전 조회 917
10년 전 조회 852
10년 전 조회 835
10년 전 조회 861
10년 전 조회 820
10년 전 조회 850
10년 전 조회 886
10년 전 조회 826
10년 전 조회 869
10년 전 조회 847
10년 전 조회 930
10년 전 조회 1,041
10년 전 조회 997
10년 전 조회 940
10년 전 조회 851
10년 전 조회 964
10년 전 조회 872
10년 전 조회 907
10년 전 조회 870
10년 전 조회 847
10년 전 조회 840
10년 전 조회 867
10년 전 조회 954
10년 전 조회 894
10년 전 조회 994
10년 전 조회 866
10년 전 조회 905
10년 전 조회 889
10년 전 조회 941
10년 전 조회 1,093
10년 전 조회 1,101
10년 전 조회 900
10년 전 조회 972
10년 전 조회 871
10년 전 조회 816
10년 전 조회 847
10년 전 조회 989
10년 전 조회 886
10년 전 조회 884
10년 전 조회 863
10년 전 조회 1,044
10년 전 조회 1,023
10년 전 조회 1,515
10년 전 조회 920
10년 전 조회 1,012
10년 전 조회 932
10년 전 조회 1,268
10년 전 조회 952
10년 전 조회 951
10년 전 조회 902
10년 전 조회 881
10년 전 조회 1,143
10년 전 조회 1,051
10년 전 조회 857
10년 전 조회 967
10년 전 조회 1,106
10년 전 조회 823
10년 전 조회 881
10년 전 조회 876
10년 전 조회 1,306
10년 전 조회 1,068
10년 전 조회 1,081
10년 전 조회 968
10년 전 조회 1,088
10년 전 조회 1,296
10년 전 조회 1,207
10년 전 조회 1,138
10년 전 조회 1,087
10년 전 조회 1,120
10년 전 조회 1,129
10년 전 조회 1,049
10년 전 조회 1,445
10년 전 조회 954
10년 전 조회 968
10년 전 조회 1,211
10년 전 조회 975
10년 전 조회 1,027
10년 전 조회 871
10년 전 조회 1,154
10년 전 조회 953
10년 전 조회 852
10년 전 조회 922
10년 전 조회 1,619
10년 전 조회 960
10년 전 조회 972
10년 전 조회 946
10년 전 조회 1,098
10년 전 조회 1,547
10년 전 조회 1,199
10년 전 조회 975
10년 전 조회 887
10년 전 조회 961
10년 전 조회 1,038
10년 전 조회 937
10년 전 조회 1,010
10년 전 조회 916
10년 전 조회 1,092
10년 전 조회 953
10년 전 조회 923
10년 전 조회 884