티스토리 뷰

example

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>


TAG
댓글
댓글쓰기 폼