다이나믹 이미지 슬라이드
페이지 정보
작성일13-02-28 00:37 조회2,034회관련링크
- 예제파일 1125회 연결
본문
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>다이나믹 슬라이드</title>
<link href="/script/slide3/css/styles.css" type="text/css" media="all" rel="stylesheet" />
<link href="/script/slide3/css/skitter.styles.min.css" type="text/css" media="all" rel="stylesheet" />
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css">
<!-- 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.animate-colors-min.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_medium').css({width: 800, height: 300}).skitter({show_randomly: true, dots: true, interval: 4000, numbers_align: 'center', theme: 'round'});
});
</script>
</head>
<body>
<div id="page">
<h1>다이나믹 슬라이드 쇼</h1>
<div id="content">
<div class="border_box">
<div class="box_skitter box_skitter_medium">
<ul>
<li><a href="#fadeFour"><img src="http://madalla.kr/script/slide/images/a1.jpg" class="fadeFour" /></a><div class="label_text"><p>slide1</p></div></li>
<li><a href="#paralell"><img src="http://madalla.kr/script/slide/images/a2.jpg" class="paralell" /></a><div class="label_text"><p>slide2</p></div></li>
<li><a href="#blind"><img src="http://madalla.kr/script/slide/images/a3.jpg" class="blind" /></a><div class="label_text"><p>slide3</p></div></li>>
</ul>
</div>
</div>
</div>
<h2>재미있는 슬라이드 쇼!</h2>
<h3></h3>
</div>
</body>
</html>