과제: 슬라이드 페이드 방식

strause1.dothome.co.kr/work28.html

웹 디자인 기능사 - 탭메뉴

닷홈에서 확인하실 수 있습니다.

 

 

 

 

원래는 setInterval(a ,b) ; 로하고 밑에 function a(){} 로 만들어야하지만

이번에는 setInterval 함수안에 바로 만들어보았습니다.

 

우선 핵심으로 뽑아야될 것은 하나가 fade out이되면서 하나가 fade in이 오는것이기때문에

변수를 두개 줘야겠다고 생각을 했습니다. 그리고 변수의 값이 1씩차이가 나야되기때문에

우선은 변수를 현재의 의미로 now를 0으로 만듭니다.

그다음  다음값의 의미로 next를 주고 

next의 값이 now의 값+ 1을 합니다.

next = 0+1 이기때문에 next는 1의 값이 되는것이고

.slideImg의 eq(0)가 fadeout하면서 .slideImg eq(1)가 fadein이 되는 패턴으로 이루어지게됩니다.

여기서 가장문제였던 점은 next = now +1의 값으로만하면 계속 1씩증가되는 결과가 나와버리기때문에 

사진이 돌아오지를 않습니다. 그렇기 때문에 사진이 총 3개이므로 next가 총 도달할 수 있는 값은 3.

그 3을 % (나머지값을구하는것)해서 1 %3을 했을 시 나머지값이 1이나오고

2%3를 했을 시 나머지값이 2가나오며,

3 %3을 했을 시 나머지값이 0이나오는 것을 이용해서  next= (now+1)%3을 적었습니다.

그리고 마지막에 now=next는 

  처음에 now값이 0으로들어갔을때 next는 1이기때문에

now값에 next값인 1을 넣어 

다음에 들어가면 now값은 1이되고 그렇게 값이 늘어나는 과정이라고 할 수 있습니다. 두서없이 적어서 죄송합니다 머리가 너무 아파요..ㅠㅠ