[Web Programming] - [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기
이전 슬라이드 배너에서는 플러그인을 사용했었는데 사용하다보니 문제점이 하나 있었다!
반응형이 안되던것... 처음 웹 브라우저의 크기를 인식해서 되는 것 같았다. 😓
그래서 책을 보고 우선 반응형으로 만들어보고 슬라이드 애니메이션을 추가해 보았다.
① 일정한 시간에 한 번씩 배열에 들어있는 이미지를 순차적으로 전환
② 전환 시간 설정 가능
③ 이미지 무한 롤링
④ 함수 활용
html + css 부분
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <!DOCTYPE html> <html> <head> <title> banner </title> <style type="text/css"> body{ margin: 0px; } #banner{ width: 100%; height: 400px; background: #e8e8e8; overflow: hidden; position: relative; } .banner{ max-width: 100%; height: 100%; float: right; } span{ color: white; font-size: 2.0em; position: absolute; top: 10px; left: 10px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <script type="text/javascript" src="./banner.js"></script> </head> <body> <div id="banner"> <img class="banner"/> <span> </span> </div> </body> </html> | cs |
js 부분
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $(document).ready(function(){ var imgList = ["banner01.png", "banner02.png", "banner03.png"]; // 배너 이미지 배열 banner(".banner", imgList, 5000); }); function banner(selector, imgList, speed){ /* * selector : 선택자 * imgList : 이미지 배열 * speed : 슬라이드 시간 */ var currentIndex = 0; var $banner = $(selector); var $tag = $("span"); $banner.attr("src", imgList[currentIndex]); $tag.text("0" + ( currentIndex + 1 )); setInterval(function(){ currentIndex ++; if( currentIndex == imgList.length ) { currentIndex = 0; } $banner.attr("src", imgList[currentIndex]); $tag.text("0" + ( currentIndex + 1 )); $banner.animate({'width':'0%'}, 0).animate({'width':'100%'},1000); }, speed); } | cs |
우선 순차적으로 배너를 전환하기 위해 배열에 띄울 배너를 넣어놓고
currentIndex로 현재 띄워지고 있는 배너의 번호를 저장한다.
( 배열의 index시작은 0 부터! )
그다음 일정 시간마다 배너를 변경해주기 위해 setInterval함수를 사용해 주었다.
책에는 처음 배너사진을 그냥 html에 설정해 주었는데 나는 자바스크립트에서만 만지고 싶어서
setInterval전에 배너 초기 설정을 해주었다.
그다음 setInterval에서는 현재 배열 인덱스값을 먼저 증가시켜준뒤
인덱스값이 배열의 크기와 같은지 체크하고 나서 배너를 변경해준다.
여기까지 하면 슬라이드 효과없이 사진이 짠! 짠! 하고 바로 바뀌어 버린다.
그래서 슬라이드로 바꿔주기 위해 에니메이션으로 효과를 주었다.
다하고 보니 조금 부족한 슬라이ㄷ...다..
여기서 배열의 사진을 html img태그로 모두 넣어준뒤 슬라이드 작업을 다시 해야할 것 같다..😅
'웹 프로그래밍' 카테고리의 다른 글
| [웹 디자인] 디자인의 종류들을 알아보자. (1) | 2018.08.31 |
|---|---|
| 반응형 웹의 짝꿍 플렉서블 박스(Flexible Box)에 대해 알아보자 (0) | 2018.08.29 |
| [jQuery] 슬라이드 배너와 스크롤 탐지 메뉴바 만들기 (1) | 2018.08.02 |
| jQuery mouseover vs. mousenter 차이점에 대해 알아보기 😏 (2) | 2018.07.13 |
| jQuery 이벤트에 대해 알아보기 😉 (0) | 2018.07.11 |