반응형

안녕하세요~

비가 주륵주륵 내리는 하루의 마무리 중인 Milkye입니다.


 오늘은 업무중에 아예 새로운 페이지 제작이 있어서 어떤 방법이 예쁠까를 찾아보다가 롤링배너가 생각이 나서 가지고 왔습니다.


jQuery를 이용해서 자연스럽게 흐르는 롤링배너를 만들어 볼 겁니다.

소스가 어렵지 않으니 바로 시작을 해보도록 하고, 혹시나 어렵다고 느끼실 함수들이 있을 수 있어서 소스와 결과 설명 후에 한번 더 정리를 해보도록 할게요.



인터넷에 잘 정리를 해 둔 소스가 있어서 살짝 가져왔습니다.


[소스]


[결과]


소스가 대략 이해가 되시나요?

이미지를 이어붙인 후, 앞에 이미지를 맨 뒤에 붙인 후 그 이미지는 삭제하는 구조로 이루어져 있습니다.

그게 .animate()  함수의 function이 담당을 하고 있구요.

추가는 .append() 를 이용해서, 삭제는 .remove()를 이용해서 하고 있습니다.


.animate()함수를 조금 살펴보면 1.5초 동안 left로 -bannerWidth만큼 옮겨라 그리고 function()에 있는 내용을 수행하라가 되겠습니다.


setInterval 또한 비슷한 기능을 합니다. 위의 소스로 보면 3초에 한번씩 rollingStart함수를 실행시켜라라는 뜻이 됩니다. 즉, 하나의 이미지가 머무는 시간은 setInterval이 정하고 이미지가 다음 이미지로 넘어가는 시간은 .animate()가 정하게 되는 것이죠.


다음번에는 이 롤링배너에 버튼을 집어넣어서 원하는 위치로 이동하는 방법을 알아보도록 하겠습니다!

감사합니다!



반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기