티스토리 뷰
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>
<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
'프로그래밍 > Ajax' 카테고리의 다른 글
Ajax - jQuery 참조 링크들 (0) | 2008.07.25 |
---|---|
Ajax - mootools - morphList (플래쉬 navigation 메뉴와 같은 효과) (0) | 2008.07.25 |
Ajax - mootools 와 jQuery 충돌시 (0) | 2008.07.25 |
Ajax - jQuery 에 대한 어떤이의 경험글 (0) | 2008.07.24 |
Ajax - XMLHttpRequest readyState (0) | 2008.07.24 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크