flex && Array로 slide만들기(2)

☺️ 이전 글 

flex && Array로 slide만들기(1)

html과 css 설정은 이전 글에서 다뤘고 이번 글에서는 js 설정만 다룬다.

 

<처음 계획 : 사용자가 사진의 왼쪽 반쪽을 누르면 ?>

(1) div.viewVer의 현재 background-image를 구한다.

(2) 현재 background-image 가 array에서 몇 번째 인지 확인하고 거기서 -1 해서

그 사진이 div.viewVer의   new background-image 가 되도록 한다.

(3) 사용자가 사진의 왼쪽 반쪽을 누르면 현재 보고 있는 사진의 왼쪽 사진을 볼 수 있게 된다.

 

<문제점 : array가 url로 되어있다.>

console.log(viewVer.style.backgroundImage)를 했을 때, 내가 기대했던 것은

https://어쩌고저쩌고.png

같은 이미지의 url이었다.

그런데 출력된 url은

url("https://어쩌고저쩌고.123.png")

와 같이 url()에 둘러쌓인 상태였다.

 

<해결방법(1) : 정규식으로 url만 추출해내기>

정규식 표현을 사용하여 url만 추출해내려고 했다.

다른 사람들이 만든 url추출 정규식 표현을 수정하여 적용해보았지만 원하는 결과가 나오지 않았다.

"https://어쩌고저쩌고.123.png""

까지 만드는 데 성공했지만 마지막에 하나 더 붙은 " 큰 따옴표를 결국 없애지 못해서

정규식 표현은 다음에 제대로 배워보는 걸로 하고 다른 방법을 찾았다.

 

<해결방법(2) : split으로 원하는 부분만 잘라쓰기>

이번에 이용한 image 소스들은 전부 내가 올린 tiystory글에서 url을 따왔기 때문에, url의 대부분이 일치했다.

예를 들면 이런식으로 ⬇︎ 점(.)을 기준으로 어떤 부분만 서로 달랐다.

 

 

 

그래서 일단

현재 viewVer.style.backgroundImage를 구해서 split으로 쪼갰다.

* split(".")이렇게 쓰면 점을 기준으로 쪼개진다. split("/") 이렇게 쓰면 슬래쉬 기준으로

 

url("https://어쩌고저쩌고.123.png")가 점을 기준으로 이렇게 세 조각으로 쪼개졌다.

 

 

내가 필요한 건 123 숫자 부분이니까 점으로 쪼갠 세 조각 중에

❷번째(index: [1])를 extractedurl로 설정했다.

*index는 [0]부터 시작하니까 두번째 조각의 index가 [1]이 된다.

 

 

그러고 나서 123조각을 다시 완전한 url소스로 둔갑시킨다.

`https://어쩌고저쩌고.${extractedUrl}.png`

그리고 나서 currentBackUrl이라는 이름을 부여한다.

 

currentBackUrl을 원래 이 이미지가 들어있던 array 에 넣어서 몇 번째 순서였는지를 알아낸다.

bestSrcBackup.indexOf(currentBackUrl)

 

그러면 최근 배경화면의 url의 index를 알 수 있다.

console.log(c) 

 

 

만약에 c가 0과 같다면 리스트의 첫번째 소스이기 때문에 왼쪽으로 더 이상 갈수가 없다.

이런 경우는 맨 마지막 사진으로 갈 수 있도록 설정해주고

c가 0과 같지 않다면 현재 배경화면인 사진의 왼쪽으로 한 칸 이동할 수 있도록

-1을 해주면 된다.

 

<오른쪽 반쪽의 경우>

왼쪽과 기본적으로 동일한 과정을 반복한다.

다만 오른쪽 onclick의 경우는 

c가 가장 마지막 소스일 경우를 생각해 주면 된다.

이렇게 설정하면 마지막 이미지와 첫번째 이미지가 연결되는 효과를 볼 수 있다.

사진 리스트를 한 번 돌고나면 다시 맨 처음으로 돌아가는 것.

 

실제 소스는 아래 깃헙 참조

🕹github: https://github.com/humonnom/wheres-miranda.git