http://www.socialembedded.com/labs/jQuery-Rotator-Plugin/jQuery-Rotator-Plugin.html
이 곳에 올라온 jQuery PlugIn을 적용한 예제입니다.
이미지가 일정시간에 따라 위로 올라갑니다.
| Rotator.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>로테이터 플러그인</title>
<style
type="text/css">
.divHeight { height:130px; }
</style>
<!--스크립트 소스 순서 중요함-->
<script
src="../../jQuery/jquery-1.3.2-vsdoc2.js"
type="text/javascript"></script>
<script
src="Source/jQuery-Rotator-Plugin_files/jquery.rotator.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function() { //$('#rotator1').rotator();
//자동으로 바뀜 : 기본 $('#rotator1').rotator({
ms: 3000 }); //3초마다 변경
});
</script> </head> <body>
<div
id="rotator1"
style="height:130px; overflow: hidden;">
<div
class="divHeight"> <img src="../../images/j1.jpg" /> 조선옥
</div>
<div
class="divHeight"> <img src="../../images/j2.jpg" /> 조선옥
</div>
<div
class="divHeight"> <img src="../../images/j3.jpg" /> 조선옥
</div>
</div> </body> </html> |
| 결과화면 |
[그림86-1] 이미지 못 줄여요!! >_< 이것도 작게 한건데...크게 보고 싶어요...*ㅡ_ㅡ* |
Rotator.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 88.jQuery - Uplodify : 업로드 기능 (14.Module ) (0) | 2009.11.19 |
|---|---|
| 87.jQuery - AutoComplete : 텍스트 자동완성 (14.Module ) (0) | 2009.11.19 |
| 85.jQuery - Carousel (14.Module ) (0) | 2009.11.19 |
| 84.jQuery - ToolTip : 도움말/풍선말 (13.Sample ) (0) | 2009.11.18 |
| 83.jQuery - TableSorting (정렬) (13.Sample ) (0) | 2009.11.18 |
Comments