IT Cookbook, HTML5 프로그래밍 입문 (3판) 12장 갤러리 연습
<!--
0.style 영역에서 div.item 1번째는 배경색을 blueviolet
, 2번째는 pink
, 3번째는 burlywood로 설정
1.data-role 속성 값이 slider인 것의 너비를 변수에 저장
2.data-role 속성 값이 slider인 것의 높이를 변수에 저장
3.data-role 속성 값이 slider인 것의 아래에 클래스가 item인 div 개수를 변수에 저장
4.data-role 속성 값이 slider인 것의
position을 relative로
overflow를 hidden으로
너비를 저장한 변수로
높이를 저장한 변수로 설정
5.conatiner 클래스의
position을 absolute로
width를 개수 * 너비로 (한 줄에 item을 전부다 놓기 위해)
6. item 클래스의
width를 너비로
height를 높이로
flaot left 설정 (한 줄에 item을 전부다 놓기 위해)
7. 페이지를 이동시키기 위해 현재 페이지를 저장할 변수 currentPage를 0으로 초기화하여 생성
8. data-role 속성 값이 slider인 태그의 자식 중 container 클래스에
500ms 시간동안 너비만큼 왼쪽으로 이동하는 함수 changePage 생성
9. 왼쪽 버튼을 누르면 changePage()가 왼쪽 페이지를 가져오고
오른쪽 버튼을 누르면 changePage()가 오른쪽 페이지를 가져오는 클릭 이벤트 연결
-->
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
// 변수를 선언합니다.
// 스타일을 적용합니다.
// 변수를 선언합니다.
// 이벤트를 연결합니다.
// 왼쪽으로 이동
// 오른쪽으로 이동
</script>
</head>
<body>
<div data-role="slider" data-width="500" data-height="300">
<div class="container">
<div class="item">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum 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>
내가 푼 답
<!--
0.style 영역에서 div.item 1번째는 배경색을 blueviolet
, 2번째는 pink
, 3번째는 burlywood로 설정
1.data-role 속성 값이 slider인 것의 너비를 변수에 저장
2.data-role 속성 값이 slider인 것의 높이를 변수에 저장
3.data-role 속성 값이 slider인 것의 아래에 클래스가 item인 div 개수를 변수에 저장
4.data-role 속성 값이 slider인 것의
position을 relative로
overflow를 hidden으로
너비를 저장한 변수로
높이를 저장한 변수로 설정
5.conatiner 클래스의
position을 absolute로
width를 개수 * 너비로 (한 줄에 item을 전부다 놓기 위해)
6. item 클래스의
width를 너비로
height를 높이로
flaot left 설정 (한 줄에 item을 전부다 놓기 위해)
7. 페이지를 이동시키기 위해 현재 페이지를 저장할 변수 currentPage를 0으로 초기화하여 생성
8. data-role 속성 값이 slider인 태그의 자식 중 container 클래스에
500ms 시간동안 너비만큼 왼쪽으로 이동하는 함수 changePage 생성
9. 왼쪽 버튼을 누르면 changePage()가 왼쪽 페이지를 가져오고
오른쪽 버튼을 누르면 changePage()가 오른쪽 페이지를 가져오는 클릭 이벤트 연결
-->
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<style>
div.item:nth-child(1){ background-color: blueviolet; }
div.item:nth-child(2){ background-color: pink; }
div.item:nth-child(3){ background-color: burlywood; }
</style>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function () {
let width = $('[data-role="slider"]').attr('data-width');
let height = $('[data-role="slider"]').attr('data-height');
let count = $('[data-role="slider"] div.item').length;
$('[data-role="slider"]').css({
position: 'relative',
overflow: 'hidden',
width: width,
height: height
});
$(".container").css({
position: 'absolute',
width: count * width,
});
$(".item").css({
width: width,
height: height,
float: 'left'
});
let currentPage = 0;
let changePage = function(){
$('[data-role="slider"] > .container').animate({
left : currentPage * width //
},500);
};
$("#left-button").click(function(){
if(currentPage < 0){ //첫번째 페이지가 아닐 때
currentPage += 1;
changePage();
}
});
$("#right-button").click(function(){
if(currentPage > -count + 1){ //마지막 페이지가 아닐 때
currentPage -= 1;
changePage();
}
});
/*
let changePage = function(){
$('[data-role="slider"] > .container').animate({
left : -currentPage * width //
},500);
};
$("#left-button").click(function(){
if(currentPage > 0){ //첫번째 페이지가 아닐 때
currentPage -= 1;
changePage();
}
});
$("#right-button").click(function(){
if(currentPage < count -1){ //마지막 페이지가 아닐 때
currentPage += 1;
changePage();
}
});
*/
});
</script>
</head>
<body>
<div data-role="slider" data-width="500" data-height="300">
<div class="container">
<div class="item">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum 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>
원본 코드 12-17