Jquery
반복연습 1번째
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>슬라이드 만들기 1번째</title>
<script src="https://use.fontawesome.com/3398c33652.js"></script>
<script src="jquery.js"></script>
</head>
<style>
* {
border: 0;
padding: 0;
margin: 0;
}
.slide_box {
width:700px;
height:400px;
position: relative;
overflow: hidden;
margin: 10% auto;
}
.slide {
width: 2100px;
height: 400px;
border: 1px solid #aaa;
position: absolute;
transition: 0.4s;
transition-timing-function: ease-in-out;
left: 0;
top: 0;
}
.slide-item {
width:700px;
height: 400px;
float: left;
}
.slide_nav {
text-align: center;
width: 100%;
position: absolute;
bottom: 20px;
}
.slide_nav > ul > li {
background: rgba(255,255,255,.5);
width: 15px;
height: 15px;
margin:0 4px;
border-radius: 10px;
display: inline-block;
cursor: pointer;
}
.slide_nav > ul > li:hover {
background: rgba(255,255,255,1);
}
.slide_nav ul .active {
background: rgba(255,255,255,1);
}
.arrow{
font-size: 50px;
cursor: pointer;
}
.arrow > .left:hover,
.arrow > .right:hover{
transition: 0.4s;
color: rgba(255,255,255,1);
}
.arrow > .left {
position: absolute;
top: 40%;
left: 20px;
color: rgba(255,255,255,.5);
}
.arrow > .right {
position: absolute;
top: 40%;
right: 20px;
color: rgba(255,255,255,.5);
}
</style>
<body>
<div class="slide_box">
<div class="slide">
<div class="slide-item" data-node="1" data-color="red"></div>
<div class="slide-item" data-node="2" data-color="blue"></div>
<div class="slide-item" data-node="3" data-color="black"></div>
</div>
<div class="slide_nav">
<ul>
<li class="active" data-anchor="1"></li>
<li data-anchor="2"></li>
<li data-anchor="3"></li>
</ul>
</div>
<div class="arrow">
<div class="left" data-direction="left"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="right" data-direction="right"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>
</div>
<script>
$(window).on('load', function(){
// 현재 slide를 담기위한 activeSlide 변수
var activeSlide = 1;
// 현재 slide와 연결된 노드를 담기 위한 node 변수
var node = 1;
// .arrow > div를 클릭하면
$('.arrow div').on('click', function(){
// direction 변수에 나 자신의 data-direction 속성값을 담을거야.
var direction = $(this).attr('data-direction');
// direction이 'lift'와 일치하고
if (direction === 'left'){
// activeSlide가 1이면
if(activeSlide === 1){
// activeSilde를 5로 바꿀거야.
activeSlide = 3;
// activeSlide가 1이 아니면
}else {
//activeSlide에서 1을 뺄거야.
activeSlide = activeSlide - 1;
}
// direction이 'right'와 일치하고
}else if (direction === 'right'){
// activeSlide가 5면
if (activeSlide === 3){
// activeSlide를 1로 바꿀거야.
activeSlide = 1;
// activeSlide가 5가 아니면
}else {
// activeSlide에 1을 더할거야.
activeSlide = activeSlide + 1;
}
// 모든 조건이 false면 에러메세지를 띄울거야.
}else{
alert('error');
}
// node변수는 현재 activeSlide와 같은 값을 가지고있어야하므로
// node변수에 activeSlide값을 넣을거야.
node = activeSlide;
// moveSlide메소드로 현재 activeSlide를 움직일거야. *기능발사!*
moveSlide(activeSlide);
// lightNav메소드로 현재 activeSlide와 매치되는 slide_nav 색을 강조할거야. *기능발사!*
lightNav(activeSlide);
});
// .slide_nav 안에 li들을 클릭하면
$('.slide_nav li').on('click', function(){
// node 변수에 data-anchor속성을 받아서 클릭한 li안에 넣어줄거야.
node = $(this).attr('data-anchor');
// activeSlide에 node를 int로 형변환해서 넣어줄거야 (속성을 받아오면 문자열로 받아와서 형변환 해야돼)
activeSlide = parseInt(node);
// moveSlide메소드로 클릭한 node값에 매칭된 activeSlide를 움직일거야. *기능발사!*
moveSlide(activeSlide);
// lightNav메소드로 클릭한 node값에 매칭된 activeSlide를 움직일거야. *기능발사!*
lightNav(activeSlide);
});
// .slide-item에 하나씩 반복해서 메소드를 실행할거야
$('.slide-item').each(function (){
// 반복된 요소 하나하나마다 요소의 data-color속성을 읽어서 css로 넣어줄거야
$(this).css("background-color", $(this).attr('data-color'));
});
// 슬라이드를 움직이게하는 moveSlide메소드를 만들거야.
// targetSlide에는 activeSlide값이 들어갈거야
function moveSlide(targetSlide) {
// 시작 슬라이드는 구하는 targetNod는 0부터 시작해야하기때문에 -1 해줘야돼
var targetNod = targetSlide - 1;
// 한번 슬라이드 될 때 움직일 left만큼 targetNod에 곱해서 distence변수에 넣어줄거야
var distence = targetNod * 700;
// .slide의 css에 left를 distence만큼 빼줄거야
$('.slide').css('left', - distence);
};
// 슬라이드가 움직일때마다 현재 슬라이드와 매칭되는 slide_nav를 밝게 해줄거야
function lightNav(anchor){
//밝게해주는 스타일이 들어있는 .active 클래스를 지워줄거야
$('.active').removeClass('active');
//현재 anchor에 따라 active클래스를 추가해줄거야
$('[data-anchor="'+anchor+'"]').addClass('active');
}
});
</script>
</body>
</html>
'Coding' 카테고리의 다른 글
| ES6 ::: 배열 (0) | 2018.06.18 |
|---|---|
| 선택 안됨 Jquery ::: 반복연습 2번째 (0) | 2018.06.12 |
| ODOO 11 ::: ORM API - Environment (0) | 2018.04.27 |
| rpc (0) | 2018.04.26 |
| ODOO 11 ::: ORM API - 레코드세트 (0) | 2018.04.26 |