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

부드럽게 오버랩되는 이미지 슬라이드 쇼

카이루
프로필 보기이 회원 글보기
 · 21년 전 · 4054 · 1
필요한만큼 여러개의 이미지를 부드럽게 보여주는 이미지 슬라이드쇼 스크립트 입니다

<html>
<head>
<title>그누소스 </title>
<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><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]</div>

첨부파일

321.html (3.2 KB, 341회)
목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 1개

웹프로그래머
프로필 보기이 회원 글보기
 14년 전
감사합니다

게시글 목록

번호 제목
8511
JavaScript 아파치 로그 정리(압축) logrotate
8510
MySQL 아파치와 mysql 자동실행 시키는 방법..
8509
MySQL 특정시간에 mysql 데이타 백업 (mysqldump)
8506
PHP 아파치 무단링크 막기 2
8505
MySQL MySQL optimization 한글번역문서 (최영봉님 글)
8503
기타 서브도메인 자동셋팅 Rewrite(리눅스 BIND, 아파치설정) 1
8502
기타 불여우 iframe 에서 지원하는 on 이벤트
8497
기타 불여우에서도 되는 메뉴 6 4
8492
기타 불여우에서도 되는 메뉴 5 4
8491
기타 불여우에서도 되는 메뉴 4
8490
기타 불여우에서도 되는 메뉴 3
8489
JavaScript 불여우에서도 되는 메뉴 2
8487
기타 불여우에서도 되는 메뉴 1 1
8484
MySQL NuxOne 2.1 배포판에 proftpd-1.2.10 설치한후 apache-2.0.52 php-5.0.3 mysql-4.1.8 설치하기 2
8483
기타 [PHP 기초] 2차원 배열의 내용 임의 출력하기
8482
기타 [PHP 기초] 배열에 임의 값 채우기
28459
HTML document.all("Object명") vs document.getElementsByName("Object명") 1
8481
JavaScript 셀렉트박스와 레이어가 겹칠시 레이어가 셀렉트 박스 뒤로 숨는 현상을 해결하는 함수
8478
기타 [PHP 기초] 달력 만들기 2
8477
기타 [PHP 기초] 구구단표 만들기
8475
PHP 정규식 (Regular Expression Functions) 1
8474
MySQL MySQL 3.23.x에서 4.0.x로 업그레이드시 주의사항
8473
기타 사용자 계정 및 계정 관리
8472
JavaScript RH7.3 설치후 해주어야 할것들
8471
PHP Apache1.3.xx버전 설치후 httpd.conf 설정
8469
기타 (자작)shell 프로그래밍으로 한꺼번에 많은 유저 생성하기 1
8468
기타 한번만 submit 되게 합니다
8467
기타 영문자나 숫자만 입력 할 수 있습니다
8466
기타 현재 페이지 이메일로 보내는 버튼 만들기
8465
JavaScript 원하는 사람에게 메일 보내기 버튼 만들기
8464
기타 특정 파일형태만 업로드 할 수 있습니다
8463
기타 뒤에 붙는 불필요한 공백 문자열을 없애줍니다
8462
기타 앞에 붙는 불필요한 공백문자열을 지워 줍니다
8461
기타 탭키 대신 엔터키를 눌러 이동합니다
8460
JavaScript 전송버튼에 '전송중...' 이라는 표시를 해 줍니다
8459
기타 입력 문자열 앞에 붙는 공백 제거하기
8458
기타 엔터키를 누르면 다음 입력상자로 이동합니다
8457
기타 버튼으로 텍스트영역의 크기를 제어합니다
8456
JavaScript 텍스트 필드에 디폴트 메세지를 보여주고 클릭하면 사라집니다
8455
JavaScript 특정일(ex 30일)이 지난 파일 삭제 및 디렉토리 이동하기
8452
MySQL cron [퍼옮] 2
8451
MySQL mysql에서의 subquery
8449
MySQL 여러데이터베이스 사용하는 방법 - 퍼옮 1
28458
HTML 문자열 연결 CONCAT()
8445
MySQL MySQL SELECT 문 - php와 관련하여 3
8444
MySQL 패스워드 변경 및 루트 패스워드 찾기
8443
MySQL MySQL 설치
8442
MySQL mysql 루트(root) 암호를 잊었을 경우 [퍼옮]
8441
MySQL MySQL 컬럼 형 [퍼옮]
8440
MySQL MySQL 연산자 ( 사칙연산, 비트연산, 논리연산 ) [퍼옮]
8439
MySQL MySQL 내부연산 ( 비교연산 )
8438
MySQL MySQL 연산자 ( 형변환, 컨트롤함수 )[퍼옮]
8437
MySQL MySQL 함수정리 ( 수학함수 ) [퍼옮]
8436
JavaScript GROUP BY 와 같이 사용되는 함수 [퍼옮]
8435
MySQL MySQL 문자열 관련함수[퍼옮]
8433
MySQL MySQL 날짜 관련 함수[퍼옮] 1
8428
MySQL MYSQL Query의 간단한 사용법 [퍼옮] 4
8427
MySQL 자주 사용하는 Mysql Query문(php와 관련하여)
8426
MySQL MySql 기본명령어 모음[콘솔사용시]
28456
HTML 다중 파일들을 하나의 db필드 및 프로그램으로 제어하기 1
8425
JavaScript 유효 도메인 책크하기
8424
기타 기타 알아두어야 할 함수 [퍼옮]
8423
기타 변수 및 수학 관련함수 [퍼옮]
8422
기타 URL 관련함수 [퍼옮]
8421
기타 파일 관련함수 [퍼옮]
8419
기타 문자열 처리함수 [퍼옮] 1
8418
기타 날짜 및 시간 관련함수 [퍼옮]
8417
PHP 미리 정의된 변수들 [퍼옮]
28455
HTML 디렉토리 관련함수 [퍼옮]
8416
MySQL 문자열 함수 - 퍼 옮 -
8415
JavaScript 배열함수
8414
기타 preg_match_all()
8412
JavaScript mktime() 1
28454
HTML setcookie
8411
PHP array_rand()
28451
HTML eregi() vs ereg() 2
8410
JavaScript strrchr()
8409
기타 key()
8406
JavaScript GetImageSize() 2
8405
JavaScript 리눅스 서버의 시간이 맞지 않을때?
28450
HTML man 페이지 txt파일로 저장하기
8404
기타 키보드의 방향키로 윈도우의 위치를 이동시킵니다
8403
기타 이동식 메뉴 박스
8402
기타 오늘은 어딜 가볼까? 콤보상자 회전후 이동하기
8401
기타 마우스 대신 키보드를 눌러 원하는 곳으로 이동합니다
8400
JavaScript 체크박스를 클릭하면 이동하는 체크박스 메뉴 스크립트
8399
기타 select 으로 이동하기 사이트 이동 소스
8391
기타 책장을 넘기는 것같은 이미지 슬라이드 쇼 스크립트 7
8390
기타 특정 디렉토리 또는 파일 갯수 세기
8389
JavaScript 디렉토리 내에서 파일만 퍼미션 변경
8387
기타 마우스를 대면 링크 이미지들을 미리 보여줍니다 1
28447
HTML 이미지를 5단계로 키워서 보자 2
8386
JavaScript DirectX의 와이프 기능을 사용한 이미지 스와핑 효과
8384
기타 풀다운 콤보메뉴로 이미지들을 보여줍니다 1
8382
JavaScript 특정 이미지를 지정한 날까지만 보여줍니다 1
8380
기타 부드럽게 오버랩되는 이미지 슬라이드 쇼 1 현재글
8379
기타 끊김없이 연속적으로 스크롤 되는 이미지 스크롤러 스크립트
8377
JavaScript iframe 써서 노 프레임 효과 내기 1
8376
MySQL 설치Apache 1.3.29 + PHP 4.3.4 + MySQL + GD + IMAP 등등 설치
8375
MySQL [펌] mysql 인덱싱.
이전 다음
전체 목록