<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="caroufredsel.frebsite.nl" />
<title>carouFredSel: an infinite, circular jQuery carousel</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.1.3.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
// Scrolled by user interaction
$('#foo2').carouFredSel({
scroll: 1, //하나씩 스크롤, 없을시 1페이지씩 스크롤
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
auto: false
});
});
</script>
<style type="text/css" media="all">
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 60px;
width: 360px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 50px;
height: 50px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
</style>
</head>
<body>
<div id="intro">
<h1><a href="http://caroufredsel.frebsite.nl">carouFredSel</a></h1>
<p>This is a demo page, for more examples, the complete documentation, tips & tricks, a support-forum and even a configuration robot, visit <a href="http://caroufredsel.frebsite.nl">caroufredsel.frebsite.nl</a></p>
</div>
<div class="wrapper">
<p>Carousel scrolled by user interaction.</p>
<div class="list_carousel">
<ul id="foo2">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
<div id="pager2" class="pager"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="author" content="caroufredsel.frebsite.nl" />
<title>carouFredSel: an infinite, circular jQuery carousel</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery.carouFredSel-5.1.3.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
// Scrolled by user interaction
$('#foo2').carouFredSel({
scroll: 1, //하나씩 스크롤, 없을시 1페이지씩 스크롤
prev: '#prev2',
next: '#next2',
pagination: "#pager2",
auto: false
});
});
</script>
<style type="text/css" media="all">
.list_carousel {
background-color: #ccc;
margin: 0 0 30px 60px;
width: 360px;
}
.list_carousel ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.list_carousel li {
font-size: 40px;
color: #999;
text-align: center;
background-color: #eee;
border: 5px solid #999;
width: 50px;
height: 50px;
padding: 0;
margin: 6px;
display: block;
float: left;
}
.clearfix {
float: none;
clear: both;
}
.prev {
float: left;
margin-left: 10px;
}
.next {
float: right;
margin-right: 10px;
}
.pager {
float: left;
width: 300px;
text-align: center;
}
.pager a {
margin: 0 5px;
text-decoration: none;
}
.pager a.selected {
text-decoration: underline;
}
.timer {
background-color: #999;
height: 6px;
width: 0px;
}
</style>
</head>
<body>
<div id="intro">
<h1><a href="http://caroufredsel.frebsite.nl">carouFredSel</a></h1>
<p>This is a demo page, for more examples, the complete documentation, tips & tricks, a support-forum and even a configuration robot, visit <a href="http://caroufredsel.frebsite.nl">caroufredsel.frebsite.nl</a></p>
</div>
<div class="wrapper">
<p>Carousel scrolled by user interaction.</p>
<div class="list_carousel">
<ul id="foo2">
<li>c</li>
<li>a</li>
<li>r</li>
<li>o</li>
<li>u</li>
<li>F</li>
<li>r</li>
<li>e</li>
<li>d</li>
<li>S</li>
<li>e</li>
<li>l</li>
<li> </li>
</ul>
<div class="clearfix"></div>
<a id="prev2" class="prev" href="#"><</a>
<a id="next2" class="next" href="#">></a>
<div id="pager2" class="pager"></div>
</div>
</div>
</body>
</html>
'web standard > jquery' 카테고리의 다른 글
| iframe 다루기 (0) | 2011.11.16 |
|---|---|
| 로그인 입력폼 description 제어 (0) | 2011.11.09 |
| 탭메뉴+prev, next (0) | 2011.08.08 |
| 특정영역 인쇄 (0) | 2011.07.18 |
| 레이어팝업 브라우저 가운데 띄우기 (0) | 2011.07.15 |
