테스트 사이트 - 개발 중인 베타 버전입니다
SIR

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

혀니천사
프로필 보기이 회원 글보기
 · 9년 전 · 287

<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>

목록
이전글 다음글

댓글 작성

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

로그인하기

게시글 목록

번호 제목
12357
MySQL 2개 테이블에서 중복된거라도 한개씩만 추출하기 입니다.
12356
MySQL MySQL php함수 정리 입니다.
12355
MySQL MySQL php오류 정리 입니다.
12354
MySQL 연산자 관련함수 정리 입니다.
12353
JavaScript 폼 유효성검사해주는 자바스트립트 라이브러리
20387
기타 텝메뉴 상단고정 및 해당위치 스크롤 4
12352
MySQL 수학 관련함수 정리 입니다.
12351
MySQL 문자열 관련함수 정리 입니다.
12350
MySQL 날짜 관련 함수 정리 입니다.
12349
PHP PHP5.6 -> PHP7.0 으로 이전시 차이점
12348
jQuery Ajax 화면 전환 시 애니메이션 효과
12347
MySQL Query의 기본사용 정리 입니다.
12346
MySQL 자주 사용하는 php와 관련 Query문 입니다.
12345
MySQL 콘솔 기본명령어 정리 입니다
12344
PHP 암호화 SHA-256
12343
MySQL mysql 인덱싱 하는 방법 입니다.
12342
MySQL MySQL 덤프방법(dump) 입니다.
12341
MySQL 여러데이터베이스 사용하는 방법 입니다.
12340
PHP 이미지에 글자쓰기
12339
MySQL 백업&복구(전체/부분/테이블) 하기 입니다.
12338
MySQL db sql문 정리 입니다.
12337
MySQL MySql 암호 초기화 및 새암호 넣기 입니다.
12336
JavaScript 라디오버튼, 체크박스 테두리 없애기 입니다.
12335
JavaScript 현재 페이지 저장하기 입니다.
12334
JavaScript 프린트 출력 자바스크립트 입니다.
이전 다음
전체 목록