jQuery Cycle 관련 샘플
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>
.jpg){kind=link}
