jQuery를 이용해서 HTML롤링배너 만들기

Posted by 돼지로운생활
2018. 5. 3. 08:30 개발자의 길/WEB

안녕하세요~

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


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


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

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



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


[소스]


[결과]


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

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

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

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


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


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


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

감사합니다!




유용한 IT정보 / 전자제품 리뷰
포털에서 MilkyeWay를 검색해주세요👍
유용한 정보였다면 ❤️ 클릭 부탁드려요 😄

이 댓글을 비밀 댓글로
    • yun
    • 2018.07.09 17:22
    좋은 게시글 감사합니다. 너무 어려웠는데 도움이 많이 되었습니다. 계속 읽어봐야 이해할 수 있을 것 같아요. 버튼 예제도 꼭 읽겠습니다.
    • youanme
    • 2019.02.05 19:30
    안녕하세요 홈페이지 제작 중 슬라이드 배너 적용하는 방법 찾고 있었는데 많은 도움이 되었습니다.
    내용에 써주신 글 (특히 자바스크립트 부분) 이해가 잘 되지 않네요 아무래도 제가 더 공부를 많이 해야할 것 같습니다