[JS] 모바일 플리킹
이것 때문에 계속 머리 아프다...
일단 처리는 되었지만 괜찮은 예제가 있어서 적어 놓음.
언제 분석 해야지
[출처]
http://dohoons.com/test/flick/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flick Navigation</title>
<link href="/test/flick/common.css" rel="stylesheet" type="text/css"></link>
<style type="text/css">
h1 { font-size:16px; font-weight:bold; }
h2 { margin-top:10px; text-align:center; }
#touchSlider { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; }
#touchSlider2 { width:200px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider2 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider2 ul li { float:left; width:200px; height:150px; background:#9C9; font-size:14px; color:#fff; }
#touchSlider3 { width:240px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider3 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider3 ul li { float:left; width:80px; height:150px; background:#9C9; font-size:14px; color:#fff; }
#touchSlider4 { width:240px; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider4 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider4 ul li { float:left; width:80px; height:150px; background:#9C9; font-size:14px; color:#fff; }
#touchSlider5 { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider5 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider5 ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; }
#touchSlider6 { width:100%; height:150px; margin:0 auto; background:#ccc; position:relative; overflow:hidden; }
#touchSlider6 ul { width:99999px; height:150px; position:absolute; top:0; left:0; overflow:hidden; }
#touchSlider6 ul li { float:left; width:100%; height:150px; background:#9C9; font-size:14px; color:#fff; }
.btn_area { background:#f5f5f5; overflow:hidden; }
.btn_area button { display:block; width:100px; height:36px; background:#000; font-size:16px; color:#fff; font-weight:bold; }
.btn_area button.btn_prev { float:left; }
.btn_area button.btn_next { float:right; }
.btn_area .btn_page { display:inline-block; width:10px; height:10px; margin:3px; font-size:0px; line-height:0; text-indent:-9999px; background:#3399CC; }
.btn_area .btn_page.on { background:#ff0000; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.event.drag-1.5.min.js" type="text/javascript"></script>
<script src="jquery.touchSlider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#touchSlider").touchSlider({
flexible : true,
btn_prev : $("#touchSlider").next().find(".btn_prev"),
btn_next : $("#touchSlider").next().find(".btn_next"),
counter : function (e) {
$("#count").html("current : " + e.current + ", total : " + e.total);
}
});
$("#touchSlider2").touchSlider({
roll : false,
page : 2,
speed : 300,
btn_prev : $("#touchSlider2").next().find(".btn_prev"),
btn_next : $("#touchSlider2").next().find(".btn_next")
});
$("#touchSlider3").touchSlider({
roll : false,
view : 3,
btn_prev : $("#touchSlider3").next().find(".btn_prev"),
btn_next : $("#touchSlider3").next().find(".btn_next")
});
$("#touchSlider4").touchSlider({
view : 3,
btn_prev : $("#touchSlider4").next().find(".btn_prev"),
btn_next : $("#touchSlider4").next().find(".btn_next")
});
$("#touchSlider5").touchSlider({
flexible : true,
view : 5,
btn_prev : $("#touchSlider5").next().find(".btn_prev"),
btn_next : $("#touchSlider5").next().find(".btn_next")
});
$("#touchSlider6").touchSlider({
flexible : true,
paging : $("#touchSlider6").next().find(".btn_page"),
initComplete : function (e) {
$("#touchSlider6").next().find(".btn_page").each(function (i, el) {
$(this).text("page " + (i+1));
});
},
counter : function (e) {
$("#touchSlider6").next().find(".btn_page").removeClass("on").eq(e.current-1).addClass("on");
}
});
});
</script>
</head>
<body>
<h1>
Flick Navigation (jQuery.touchSlider, dohoons)</h1>
좌우로 터치드래그~ <br />
<h2>
1 : rolling, flexible, counter</h2>
<div id="touchSlider">
<ul>
<li>
content 1
</li>
<li style="background: #396;">
content 2
</li>
<li style="background: #39C;">
content 3
</li>
<li style="background: #33C;">
content 4
</li>
</ul>
</div>
<div class="btn_area">
<button class="btn_prev" type="button">prev</button>
<button class="btn_next" type="button">next</button>
<div id="count" style="font-size: 16px; height: 36px; line-height: 36px; text-align: center;">
</div>
</div>
<h2>
2 : limit, page:2, speed:300</h2>
<div id="touchSlider2">
<ul>
<li>
content 1
</li>
<li style="background: #396;">
content 2
</li>
<li style="background: #39C;">
content 3
</li>
<li style="background: #33C;">
content 4
</li>
</ul>
</div>
<div class="btn_area">
<button class="btn_prev" type="button">prev</button>
<button class="btn_next" type="button">next</button>
</div>
<h2>
3 : multiple, view:3, limit</h2>
<div id="touchSlider3">
<ul>
<li>
content 1
</li>
<li style="background: #396;">
content 2
</li>
<li style="background: #39C;">
content 3
</li>
<li>
content 4
</li>
<li style="background: #396;">
content 5
</li>
<li style="background: #39C;">
content 6
</li>
<li>
content 7
</li>
<li style="background: #396;">
content 8
</li>
<li style="background: #39C;">
content 9
</li>
</ul>
</div>
<div class="btn_area">
<button class="btn_prev" type="button">prev</button>
<button class="btn_next" type="button">next</button>
</div>
<h2>
4 : multiple, view:3, rolling</h2>
<div id="touchSlider4">
<ul>
<li>
content 1
</li>
<li style="background: #396;">
content 2
</li>
<li style="background: #39C;">
content 3
</li>
<li>
content 4
</li>
<li style="background: #396;">
content 5
</li>
<li style="background: #39C;">
content 6
</li>
<li>
content 7
</li>
<li style="background: #396;">
content 8
</li>
<li style="background: #39C;">
content 9
</li>
</ul>
</div>
<div class="btn_area">
<button class="btn_prev" type="button">prev</button>
<button class="btn_next" type="button">next</button>
</div>
<h2>
5 : multiple, view:5, flexible, rolling</h2>
<div id="touchSlider5">
<ul>
<li>
content 1
</li>
<li style="background: #396;">
content 2
</li>
<li style="background: #39C;">
content 3
</li>
<li>
content 4
</li>
<li style="background: #396;">
content 5
</li>
<li>
content 6
</li>
<li style="background: #396;">
content 7
</li>
<li style="background: #39C;">
content 8
</li>
<li>
content 9
</li>
<li style="background: #396;">
content 10
</li>
</ul>
</div>
<div class="btn_area">
<button class="btn_prev" type="button">prev</button>
<button class="btn_next" type="button">next</button>
</div>
<h2>
6 : flexible, rolling, paging, counter</h2>
<div id="touchSlider6">
<ul>
<li>
content 1
</li>
<li style="background: #396;">
content 2
</li>
<li style="background: #39C;">
content 3
</li>
<li style="background: #33C;">
content 4
</li>
</ul>
</div>
<div class="btn_area" style="text-align: center;">
<button class="btn_page" type="button">paging</button>
</div>
<br /><br /><br /><br /><br /><br />
</body>
</html>
댓글
댓글 쓰기