※자바스크립트 - 슬라이드 기능
슬라이드 결과값.
<@html>
< input type = "button" value = " < " class = "btn_slide btn_slide_L" >
< input type = "button" value = " > " class = "btn_slide btn_slide_R" >
< div class = "main_banner" >
< div class = "banner banner0" > 0 </ div >
< div class = "banner banner1" > 1 </ div >
< div class = "banner banner2" > 2 </ div >
< div class = "banner banner3" > 3 </ div >
</ div >
<@css>
.main_banner {
width : 100% ;
height : 400px ;
/* background-color: pink; */
border : 10px solid ;
box-sizing : border-box ;
position : relative ;
}
.banner {
width : 100% ;
height : 100% ;
position : absolute ;
top : 0 ;
opacity : 0.5 ;
font-size : 150px ;
font-weight : 900 ;
}
.banner0 {
left : 0 ;
background-color : red ;
}
.banner1 {
left : 100% ;
background-color : green ;
}
.banner2 {
left : 100% ;
background-color : blue ;
}
.banner3 {
left : 100% ;
background-color : purple ;
}
<@script>
< script >
let btn_L = document . getElementsByClassName ( 'btn_slide_L' )[ 0 ];
let btn_R = document . getElementsByClassName ( 'btn_slide_R' )[ 0 ];
btn_L . addEventListener ( 'click' , function (){ slide ( "left" )} );
btn_R . addEventListener ( 'click' , () => { slide ( "right" )} );
let banner_arr = document . getElementsByClassName ( 'banner' );
// ["빨","초","파"]
let curr_index = 0 ;
let interval ;
let pos_x = 0 ;
function slide ( direction ) {
let bc = banner_arr . length
interval = setInterval (() => {
if ( direction == "right" ) {
// 현재 보고있는판
banner_arr [ curr_index % bc ]. style . left = - pos_x + "%" ;
// 들어올판 - 우측(left:100%)에 대기하고 있는 판
banner_arr [( curr_index + 1 ) % bc ]. style . left = ( 100 - pos_x )+ "%" ;
if ( pos_x >= 100 ) {
clearInterval ( interval );
curr_index += 1 ;
pos_x = 0
}
}
else if ( direction == "left" ) {
// 보고있는판
banner_arr [ curr_index % bc ]. style . left = pos_x + "%" ;
// 들어올판
banner_arr [( curr_index +( bc - 1 )) % bc ]. style . left = -( 100 - pos_x )+ "%" ;
// banner_arr[ (curr_index-1%3)<0?(bc-1):(curr_index-1%3)].style.left = -(100-pos_x)+"%";
if ( pos_x >= 100 ) {
clearInterval ( interval );
curr_index += bc - 1 ;
// curr_index = (curr_index-1%3)<0?(bc-1):(curr_index-1%3)
pos_x = 0
}
}
pos_x ++;
}, 10 )
}
</ script >
@ 오른쪽버튼 누르면 슬라이드 가 오른쪽에서 들어오게 되고, 현재상태에서 왼쪽버튼 누르면 슬라이드가 왼쪽에서 들어오게 되는 슬라이드 기능을 만들어보고자 한다.
1. 요소 잡아주기
let btn_L = document . getElementsByClassName ( 'btn_slide_L' )[ 0 ];
let btn_R = document . getElementsByClassName ( 'btn_slide_R' )[ 0 ];
btn_L . addEventListener ( 'click' , function (){ slide ( "left" )} );
btn_R . addEventListener ( 'click' , () => { slide ( "right" )} );
1) 해당 btn_l (왼쪽 버튼), btn_r (오른쪽버튼)의 요소위치를 잡아준다.
- 클래스로 돼있으니 클래스뒤에 방번호 기재를 꼭 해준다.(classname사용 시 -배열이 되는 것이다)
2) 태그에 onclick으로 해도 되지만 지금은 , 1) 잡은 왼쪽, 오른쪽의 요소 값에 eventlistener를 사용하여("이벤트명", "함수명")을 사용하여 해당 버튼 클릭 시 진행되게 적용해 준다.
- function (){ slide ( "left" ) -이렇게 익명함수로 감싼 이유는 그냥 {slide("left")만썻을시
2. 초기값들 선언해 주기
let banner_arr = document . getElementsByClassName ( 'banner' );
// ["빨","초","파"]
let curr_index = 0 ;
let interval ;
let pos_x = 0 ;
1) banner_arr :배열값을 선언과 동시에 값을 입력해 준 것인데 여기에는 방번호[]를 안 적어도 banner클래스의 4개가 다 적용되어 배열로 나타나게 해 준다.-banner0~banner4까지 모두 포함된 것이다.
2) curr_index :보통 이렇게 배열을 반복되게 한다면 %를 이용해 나머지를 구해서 그 나머지값이 반복되게끔 해줄 것이다
그래서 이 변숫값을 = 0을 선언해서 배열의 개수값에서 이 값을 나눠서 배열의 인덱스번호를 나타나게 해 줄 것이다. -
이게 나중에 코드가 진행됨에 따라서 1씩 증가되게 해 줄 것이다.
3) let interval :(별도로 멈출 때까지 무한동작) 하게 해주는 선언문이고 이 값을 선언만 해주고 코드가 진행됨에 따라서 이 변수의 값을 그때마다 바꿔서 사용해 주려고 초기에 선언만 해준 것이다.
4) let pos_x :이거는 banner의 left 사방값의 값에 쓰일 변수를 선언해 준 것이다.
3. 함수적용
function slide ( direction ) {
let bc = banner_arr . length
interval = setInterval (() => {
if ( direction == "right" ) {
// 현재 보고있는판
banner_arr [ curr_index % bc ]. style . left = - pos_x + "%" ;
// 들어올판 - 우측(left:100%)에 대기하고 있는 판
banner_arr [( curr_index + 1 ) % bc ]. style . left = ( 100 - pos_x )+ "%" ;
if ( pos_x >= 100 ) {
clearInterval ( interval );
curr_index += 1 ;
pos_x = 0
}
}
else if ( direction == "left" ) {
// 보고있는판
banner_arr [ curr_index % bc ]. style . left = pos_x + "%" ;
// 들어올판
banner_arr [( curr_index +( bc - 1 )) % bc ]. style . left = -( 100 - pos_x )+ "%" ;
// banner_arr[ (curr_index-1%3)<0?(bc-1):(curr_index-1%3)].style.left = -(100-pos_x)+"%";
if ( pos_x >= 100 ) {
clearInterval ( interval );
curr_index += bc - 1 ;
// curr_index = (curr_index-1%3)<0?(bc-1):(curr_index-1%3)
pos_x = 0
}
}
pos_x ++;
}, 10 )
}
1) 첫 번째로 slide 함수를 적용해 slide() 안에 매개변수의 인자값이 든 (left, right) 함수호출버튼을 클릭 시 해당함수가 실행되게끔 해준다.
2) slide 함수가 클릭되면 interval= setinterval( function(){}) (무한동작되게 하는 함수 선언) 안에 if 조건문을 걸어서 left, right 버튼 누를 시 시행되는 코드가 다르도록 해줄 것이다.
- setinterval 함수가 마지막에는 해당 함수가 어느 정도 시간마다 반복될 것인지 , 숫자 이렇게 명시할 수 있다. (1000- 1초 , 10- 0.01초 를뜻한다)
3) interval 안에 if 문으로 slide의 매개변숫값이 == "left"or" right" 일 때 시작하게끔 if 랑 else if 문으로 나눠서 사용해 준다.
if에 left의 조건문이 적용이 된다면
banner_arr [ curr_index % bc ]. style . left = - pos_x + "%" ;
// 들어올판 - 우측(left:100%)에 대기하고 있는 판
banner_arr [( curr_index + 1 ) % bc ]. style . left = ( 100 - pos_x )+ "%" ;
- banner_arr [0%4==0] 일 때. 스타일에. left사방값이 -pos_x % 증가하여 ->0번째 인덱스 banner 가 왼쪽으로 빠지게끔 해줄 것이고 , 동시에
- banner_arr [0+1%4==1] 일 때. 스타일에. left사방값이 (100-pos_x) % 증가하여 ->1번째 인덱스 banner 가 왼쪽 100%에 위치하던 게 0%로 위치로 이동하게 해 줄 것이다.
그리고 intrtval 스코어 안쪽에 pos_x ++ 해당 if문들이 다 적용되고 나서 마지막에 1씩 증가하게 하여 반복될떄마다 1씩 증가하여 100의 값을 가졌을 때 아래와 같이
if ( pos_x >= 100 ) {
clearInterval ( interval );
curr_index += 1 ;
pos_x = 0
}
- clearlnterval(interval): interval 반복함수를 멈춘다는 뜻이고.
- curr_index+= 1씩 증가하게 될 것이다. -> let curr_index 값이 1의된상태서 slide() 함수 클릭 시 초기값이 1인 상태로 시작해서 현재 banner_arr의 인덱스의 다음 값이 시작위치에 있도록 해줄 것이다.
else if ( direction == "left" ) {
// 보고있는판
banner_arr [ curr_index % bc ]. style . left = pos_x + "%" ;
// 들어올판
banner_arr [( curr_index +( bc - 1 )) % bc ]. style . left = -( 100 - pos_x )+ "%" ;
// banner_arr[ (curr_index-1%3)<0?(bc-1):(curr_index-1%3)].style.left = -(100-pos_x)+"%";
if ( pos_x >= 100 ) {
clearInterval ( interval );
curr_index += bc - 1 ;
// curr_index = (curr_index-1%3)<0?(bc-1):(curr_index-1%3)
pos_x = 0
}
}
4) else if (slide 함수의 매개변수가 =="left") 일시에 해당 조건이 실행되게끔 적용해 줄 것이다.
- banner_arr [right 조건문에서 curr_index 값이 3으로 끝난 상태면 현재 left문 적용 시에 curr_index 가 3으로 시작되게 될 것이다-> 3%4==1] 일 때. 스타일에. left사방값이 pos_x % 증가하여 ->3번째 인덱스 banner 가 오른쪽으로 빠지게끔 해줄 것이고 , 동시에
- banner_arr [3+(4-1)%4==2](원래 3번째 인덱스의 뒤에 값 2번을 잡아줘야 되니(bs-1) 읏하면 배열 전체 개수에 1을 빼면 맨뒤에 배열인덱스 값을 가짐으로 여기다 원래 인덱스를 더해 bs로 나눴을 때 해당값이 2로 위치한다. 말 그대로 인데스를 뒤에 값부터 주려고 이렇게 식을 세웠다.) 일 때. 스타일에. left사방값이 -(100-pos_x) % 감소하여 ->2번째 인덱스 banner 가 왼쪽 -100%에 위치하던 게 0%로 위치로 이동하게 해 줄 것이다.
@(위에 2번째 인데스 번호에 해당하는 값은 현재 위치한 인덱스 번호의 뒤에 값 그러니까 [1]에서 시작한다면 [2]의 인덱에 해당하는 배열값이 움직이게 해 줄 것이다.)
그리고 intrtval 스코어 안쪽에 pos_x ++ 해당 if문들이 다 적용되고 나서 마지막에 pos_x 값이 1씩 증가하게 하여 반복될떄마다 banner가 0.01초씩 이동하게끔 해줄 것이고
-이 pos_x값이 100이 되면
마찬가지로 해당 interval을 종료하게 해 줄 것이고, curr_index는 (bc-1) 이렇게 배열 전체 개수에 1을 빼서 배열의 마지막 인덱스 값을 더해주면은 시작위치가 2번째 움직인 인덱스 박스 값이 될 것이다.
그리고 pos_x= 0으로 초기화해 줄 것이다 (버튼 누를 시 다시 0에서부터 움직일 수 있게끔 적용해 준 것이다. )
