-
jQuery Cycle 관련 샘플Programming/JAVASCRIPT 2014. 9. 22. 12:32
jQuery Cycle 플러그인을 사용한 간단한 슬라이드 쇼에 컨트롤 추가한 샘플
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">
img{width:314px;height:180px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script>
$(function(){
$('#slideshow').cycle({fx:'shuffle'});
controlButtons();
});var controlButtons = function(){
$('body').append('<span id="pause">Pause</span><span id="resume">Resume</span>');
$('#resume').toggle();
controlEvent();
};
var controlEvent = function(){
$('#pause').click(function() {
$('#slideshow').cycle('pause');
toggleControls();
});
$('#resume').click(function() {
$('#slideshow').cycle('resume');
toggleControls();
});
}var toggleControls = function(){
$('#pause').toggle();
$('#resume').toggle();
};</script>
</head>
<body>
<h1>Image Slide</h1>
<div id="slideshow">
<img src="http://image.nbkorea.com/SaveFile/SubBanner/201408/3-sub.jpg" />
<img src="http://image.nbkorea.com/SaveFile/SubBanner/201407/그림4-1(1).jpg" />
<img src="http://image.nbkorea.com/SaveFile/SubBanner/201407/그림1-1.jpg" />
<img src="http://image.nbkorea.com/SaveFile/SubBanner/201407/사진4-2.jpg" />
<img src="http://image.nbkorea.com/SaveFile/SubBanner/201405/서브배너.gif" />
<img src="http://image.nbkorea.com/SaveFile/SubBanner/201403/사진6_314.jpg" />
</div>
</body>
</html>'Programming > JAVASCRIPT' 카테고리의 다른 글
jquery cycle2 버전 좋구나~ ㅠ.ㅠ (0) 2015.03.31 바이트 체크 스크립트 (0) 2012.11.27 window.addEventListener 사용시.. (0) 2011.07.08 SNS 서비스 연동 스크립트 (0) 2011.03.03 Core JavaScript 1.5 Reference.. (0) 2010.09.29
.jpg){kind=link}
