티스토리 뷰
Lorem inpsum dolor sit amet
Lorem inpsum dolor sit amet, consectetur
Proin in urna turpis.
Lorem ipsum dolor sit amet, consectetur
Duis malesuada lorem neque.
Lorem ipsum dolor sit amet, consectetur
<!-- 방향키로 슬라이드/슬라이드무한루프 -->
<!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 |
댓글