티스토리 뷰
<!-- 방향키로 슬라이드/슬라이드무한루프 -->
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>example</title>
<style>
div.item:nth-child(1) {
background: blueviolet;
}
div.item:nth-child(2) {
background: pink;
}
div.item:nth-child(3) {
background: burlywood;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function() {
//변수선언
var width = $('[data-role="slider"]').attr('data-width');
var height = $('[data-role="slider"]').attr('data-height');
var count = $('[data-role="slider"] div.item').length;
//스타일 적용
$('[data-role="slider"]').css({
position : 'relative',
overflow : 'hidden',
width : width,
height : height
}).find('.container').css({
position : 'absolute',
width : count * width,
overflow : 'hidden'
}).find('.item').css({
width : width,
height : height,
float : 'left'
});
//변수 선언
var currentPage = 0;
var changePage = function() {
$('[data-role="slider"] > .container').animate({
left : -currentPage * width
}, 500);
};
//이벤트를 연결합니다.
$('#left-button').click(function() {
if (currentPage > 0) {
//왼쪽으로 이동
currentPage = currentPage - 1;
changePage();
} else {
currentPage = count - 1;
changePage();
}
});
$('#right-button').click(function() {
if (currentPage < count - 1) {
//오른쪽으로 이동
currentPage = currentPage + 1;
changePage();
} else {
currentPage = 0;
changePage();
}
});
window.onload = function() {
window.onkeydown = function(event) {
if (event.keyCode == 37) {
if (currentPage > 0) {
//왼쪽으로 이동
currentPage = currentPage - 1;
changePage();
} else {
currentPage = count - 1;
changePage();
}
} else if (event.keyCode == 39) {
if (currentPage < count - 1) {
//오른쪽으로 이동
currentPage = currentPage + 1;
changePage();
} else {
currentPage = 0;
changePage();
}
}
};
};
});
</script>
</head>
<body>
<div data-role="slider" data-width="500" data-height="300">
<div class="container">
<div class="item">
<h1>Lorem inpsum dolor sit amet</h1>
<p>Lorem inpsum dolor sit amet, consectetur</p>
</div>
<div class="item">
<h1>Proin in urna turpis.</h1>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="item">
<h1>Duis malesuada lorem neque.</h1>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
</div>
<button id="left-button"><</button>
<button id="right-button">></button>
</body>
</html>
'java,web study > 7주차 (8월 12일~8월 18일)' 카테고리의 다른 글
| 반응형웹사이트 - 고양이사이트 (0) | 2013.08.13 |
|---|---|
| CSS/JQuery - 툴팁 페이드인/페이드아웃 해보기 (0) | 2013.08.13 |
| JQuery - 움직이는 애니메이션 그리기 (0) | 2013.08.12 |
| JQuery - 이미지 애니메이션(스탑버튼) (0) | 2013.08.12 |
| JQuery - 이벤트 실행방지하기 (0) | 2013.08.12 |