다양한 효과의 슬라이드 쇼
페이지 정보
작성일13-02-06 14:54 조회1,279회관련링크
- 예제파일 738회 연결
본문
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>다양한 효과 슬라이드</title>
<link href="/script/slide3/css/styles.css" type="text/css" media="all" rel="stylesheet" />
<!-- Skitter Styles -->
<link href="/script/slide3/css/skitter.styles.min.css" type="text/css" media="all" rel="stylesheet" />
<!-- Skitter JS -->
<script type="text/javascript" language="javascript" src="/script/slide3/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript" src="/script/slide3/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" language="javascript" src="/script/slide3/js/jquery.skitter.min.js"></script>
<!-- Init Skitter -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.box_skitter_large').skitter({
theme: 'clean',
numbers_align: 'center',
progressbar: true,
dots: true,
preview: true
});
});
</script>
</head>
<body>
<div id="page">
<h1>다양한 효과의 슬라이드 쇼</h1>
<div id="content">
<div class="border_box">
<div class="box_skitter box_skitter_large">
<ul>
<li><a href="#cube"><img src="/script/slide3/images/example/001.jpg" class="circles" /></a><div class="label_text"><p>cube</p></div></li>
<li><a href="#cubeRandom"><img src="/script/slide3/images/example/002.jpg" class="circlesInside" /></a><div class="label_text"><p>cubeRandom</p></div></li>
<li><a href="#block"><img src="/script/slide3/images/example/003.jpg" class="circlesRotate" /></a><div class="label_text"><p>block</p></div></li>
<li><a href="#cubeStop"><img src="/script/slide3/images/example/004.jpg" class="cubeShow" /></a><div class="label_text"><p>cubeStop</p></div></li>
</ul>
</div>
</div>
</div>
<h3><a href="/script/slide/slide3.zip" target="_blank" style="padding:11px 15px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle;border-radius:3px;width:128px;font-size:15px;font-weight:bold;font-family:'Nanum
Gothic';">전체파일 다운로드</a></h3>
</div>
</body>
</html>
