티스토리 뷰

mootools를 기반으로 한 간단한 슬라이드 쇼!! (* mootools는 js fw로 자세한 정보는 '이곳' 에서 확인하세요)
매우 간단한 코드 몇줄로 슬라이드 생성이 가능합니다.


사용자 삽입 이미지


*예제코드..
<script type="text/javascript" charset="utf-8" src="mootools-1.2-core.js"></script>
    <script type="text/javascript" charset="utf-8" src="mootools-1.2-more.js"></script>
    <script type="text/javascript" charset="utf-8" src="morphlist.js"></script>
    <script type="text/javascript" charset="utf-8" src="barackslideshow.js"></script>
    .
    .
    .
    .
    .
    <div id="slideshow">   
      <span id="loading">Loading</span>
   
      <ul id="pictures">
        <li><img src="images/cities/melbourne.jpg" alt="Melbourne" title="Melbourne" /></li>
        <li><img src="images/cities/buenos_aires.jpg" alt="Buenos Aires" title="Buenos Aires" /></li>
        <li><img src="images/cities/urubamba.jpg" alt="Urubamba" title="Urubamba" /></li>
        <li><img src="images/cities/london.jpg" alt="London" title="London" /></li>
        <li><img src="images/cities/venice.jpg" alt="Venice" title="Venice" /></li>
        <li><img src="images/cities/paris.jpg" alt="Paris" title="Paris" /></li>
        <li><img src="images/cities/osaka.jpg" alt="Osaka" title="Osaka" /></li>       
      </ul>
     
      <ul id="menu">
        <li><a href="images/cities/melbourne.jpg">Melbourne</a></li>
        <li><a href="images/cities/buenos_aires.jpg">Buenos Aires</a></li>
        <li><a href="images/cities/urubamba.jpg">Urubamba</a></li>
        <li><a href="images/cities/london.jpg">London</a></li>
        <li><a href="images/cities/venice.jpg">Venice</a></li>
        <li><a href="images/cities/paris.jpg">Paris</a></li>
        <li><a href="images/cities/osaka.jpg">Osaka</a></li>
      </ul>
    </div>

위의 예제코드로 인해 생성된 슬라이드 쇼
사용자 삽입 이미지

공식 출처 : http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/
미국 2008 대선후보 바락오바마 의원 공식싸이트 메인 에도 적용 되어 있습니다 : http://www.barackobama.com/index.php

첨부화일 : barackslideshow.zip
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크