본문 바로가기

프로그래밍

이미지 슬라이드쇼(Slide Show)

반응형
이미지 슬라이드쇼 만들기


사용자 삽입 이미지


1. 첨부파일 다운로드하여 업로드하기


2. 헤더안에 아래코드삽입
<script type="text/javascript" src="bbs_skin/mootools.js"></script>
<script type="text/javascript" src="bbs_skin/BackgroundSlider.js"></script>
<script type="text/javascript" src="bbs_skin/slideshow.js"></script>
</head>

3. 디스플레이를 원하는 위치에 아래코드 삽입
<DIV id=container>
<DIV class=slideshow id=slideshow></DIV>
<SCRIPT type=text/javascript>
     window.addEvent('domready',function(){
    var obj = {
     wait: 3000,
     effect: 'fade',
     duration: 1000,
     loop: true,
     thumbnails: true,
     backgroundSlider: true
    }
    show = new SlideShow('slideshow','slideshowThumbnail',obj);
    show.play();
   });
    </SCRIPT>
    <br>
<DIV id=thumbnails><A class=slideshowThumbnail href="office/000.jpg"><IMG src="office/000.jpg" border=0 width=100 height=66></A>
<A class=slideshowThumbnail href="office/001.jpg"><IMG src="office/001.jpg" border=0 width=100 height=66></A>
<A class=slideshowThumbnail href="office/002.jpg"><IMG src="office/002.jpg" border=0 width=100 height=66></A>
<A class=slideshowThumbnail href="office/003.jpg"><IMG src="office/003.jpg" border=0 width=100 height=66></A>
</DIV>
    </DIV>

반응형

'프로그래밍' 카테고리의 다른 글

OPEN API 모음  (0) 2009.10.20
HTML 4와 HTML 5의 차이점  (0) 2009.10.08
C#시작을 위한 환경구축  (0) 2009.09.03
메일서버용 스팸필터 스팸어쌔신  (0) 2008.01.03
글 테두리/ 박스테두리  (0) 2007.10.23