http://plugins.jquery.com/에 서 Carrusel 검색해 나오는 자료 중 2번째 자료 다운로드
http://plugins.jquery.com/project/jquery-infinite-carousel
해당 파일 압축을 풀고 적용합니다.
이미지를 슬라이드 형식
| Carousel.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title></title>
<link
href="Source/jquery.infinite-carousel.css"
rel="stylesheet"
type="text/css"
/>
<link
href="Source/demos/demo_files/periscope-theme-switcher.css"
rel="stylesheet"
type="text/css"
/>
<script
src="../../jQuery/jquery-1.3.2-vsdoc2.js"
type="text/javascript"></script>
<script
src="Source/jquery.infinite-carousel.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function() { $('#slider-stage').carousel('#previous', '#next');
});
</script> </head> <body>
<div
id="sliderBloc">
<a
id="previous">이전</a>
<div
style=""
id="slider-stage">
<div
style="width:512px;" id="slider-list"> <a class="theme"> <img src="../../images/j1.jpg" /> <span class="nameVignette">조선옥</span> <span class="changeTheme">이뻐욤</span> </a> <a class="theme"> <img src="../../images/j2.jpg" /> <span class="nameVignette">조선옥</span> <span class="changeTheme">진짜이쁘다</span> </a> <a class="theme"> <img src="../../images/j3.jpg" /> <span class="nameVignette">조선옥</span> <span class="changeTheme">최고에요!</span> </a>
</div>
</div>
<a
id="next">다음</a>
</div> </body> </html> |
| 결과화면 |
[그림85-1]
Body부분을 반복
|
Carousel.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 87.jQuery - AutoComplete : 텍스트 자동완성 (14.Module ) (0) | 2009.11.19 |
|---|---|
| 86.jQuery - Rotator (14.Module ) (0) | 2009.11.19 |
| 84.jQuery - ToolTip : 도움말/풍선말 (13.Sample ) (0) | 2009.11.18 |
| 83.jQuery - TableSorting (정렬) (13.Sample ) (0) | 2009.11.18 |
| 82.jQuery - TablePlugIn (13.Sample ) (0) | 2009.11.18 |
Comments