태그만 입력하면 자동으로 배너가 만들어지도록 Simple Banner을 만들었습니다.
일단 필요한 CSS 와 자바스크립트 파일을 로드합니다.
1 2 3 | <link rel="stylesheet" href="simpleBanner.css"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="simpleBanner.js"></script> |
그리고 필요한 곳에 다음의 형식으로 태그만 입력하면 나머지는 Simple Banner가 알아서 처리합니다.
5 6 7 8 9 10 | <div class="simple_banner_wrap"> <ul> <li>......</li> <li>......</li> </ul> </div> |
Demo: http://hangunsworld.com/blogSamples/simpleBanner/
다음의 속성값을 통해서 배너의 동작을 설정할 수도 있죠.
data-type: 배너 동작 방식
- alpha: 알파 트윈
- hslide: 가로방향 슬라이드
- vslide: 세로방향 슬라이드
data-nav-type: 네비게이션 타입
- bullt: 블릿
- numeral: 숫자
- prev_next: 이전/다음
data-interval: 타이머 시간(밀리세컨드)
update: 2016/03/02
소스 요청이 간간이 있어 다운로드 링크 추가합니다.
Simple Banner 소스 다운로드
배너 이미지 멋집니다.
근데 IE 8에서는 움직이지가 않네요.
아 그러네요. IE 9에서만 확인해 봐서리…
setTimeout이 IE에서 다르게 동작해서 발생하는 문제로, 시간 될때 수정하도록 하겠습니다.
즐거운 하루 되세요.
IE8에서도 동작하도록 수정했습니다.
멋지십니다… 잘 만드셨네요!!!
감사합니다.
정말 간단하게 최소한의 기능만 넣은거라, 좀 부족하긴 한데, 그냥저냥 쓸 수는 있습니다 ^^
잘 만드신거 응용해서 사용 중입니다.
그런데 질문이 하나 있습니다… 만일 아래 구조 처럼 하니깐 ul의 li를 하나 빼먹고 슬라이딩 되네요..
어디를 수정하면 천벗째 것도 나올까요? 그리고 새로고침하면 ul > li의 첫번째 것이 보여야 하는데 젤 마지막게 보입니다.
banner 1
banner 2
banner 3
banner 4
banner 5
banner 6
banner 7
banner 8
banner 9
banner 10
banner 11
banner 12
banner 13
banner 14
banner 15
banner 16
banner 17
banner 18
banner 19
일단 올리신 구조로 테스트 해봐도 잘 동작하는 것 같네요.
슬라이드를 하나 빼먹고 넘어간다면 이전, 다음 슬라이드 계산하는 부분에서 오류로 특정 슬라이드를 건너 뛰는 것이 아닌가 싶네요. 그리고 새로고침 시에 마지막 슬라이드가 보이는 것도 같은 요인으로 발생하는 것은 아닌지요?
그게 아니면 슬라이드들이 같은 좌표상에 겹쳐진 상태에서 마지막 슬라이드가 상위에 노출될 가능성도 있습니다.
자세한 것은 수정하신 소스를 보내주시면 한 번 디버깅해 보도록 할게요. 이메일은 hanguns@gmail.com 입니다.
수고하세요.
넵 감사합니다^^
메일 보내드렸습니다… 부탁 드려요~~^^
메일로 답변 보냈습니다. 확인해 보세요.
수고하세요 ^^
좋은 자료 감사합니다
롤링 배너 때문에 골치 아팟는데 한번에 해결 가능한 부분을 찾은 것 같습니다
혹시 소스를 lhl4701@daum,net으로 받을 수 있을 까요?
다시한번 감사합니다
메일 보내드렸어요 ^^
안녕하세요.
홈페이지 관리 때문에 슬라이드 배너 제작 방법을 찾다가 들어오게 되었네요.
다른 슬라이드 배너들에 비해 만드신 슬라이드 배너가 제일 좋아보여서 홈페이지에 쓰고 싶은데
혹시 simpleBanner.js 소스 파일을 받을 수 있을까요?
메일 주소는 ytbeom@gmail.com 입니다.
감사합니다. 좋은 하루 되세요! :D
메일 보냈습니다.
새해 복 많이 받으세요 ^^
안녕하세요! 홈페이지 둘러보다가 슬라이드 배너 맨마지막에 prev_next 배너가 맘에들어서 그러는데
메일로 좀 받아볼수있을까요?ㅠㅠ
메일주소는 whitecast24@naver.com 입니다
좋은하루 보내세요!
메일 보냈습니다.
보내야지 하다가 깜빡하고, 이제서야 보내내요.
안녕하세요!! 홈페이지 제작 연습중 제일 상단의 배너가 너무 마음에 드네요 ㅠㅠ
죄송하지만 소스를 받아볼 수 있을까요? :D
초보인 저에게 많은 도움이 될 것 같습니다 ^^
dusgmlsms4@naver.com여기로 가능하시다면 부탁드리겠습니다. 감사합니다!!
소스가 추가되어있네요!! 감사합니다 ㅎㅎ
네, 요청하시는 분이 있어서 추가해 놓았어요 ^^
안녕하세요. 배너 관련으로 검색하다가 찾게 되었는데 너무 좋네요 ^^
근데 궁금한 점이 있네요~ ^^;; 현재 안드로이드 WebView 에서 이 배너를 활용 중인데 네비게이터 크기를 키워 클릭 형식으로 배너 화면을 전환하고 있습니다. 이를 슬라이드 형식으로 터치를 하면 화면을 전환하게끔 하고 싶어 스크립트 파일에 전환하는 함수를 추가 싶은데 어느 변수의 값을 강제로 고쳐야 할까요?? 네비게이터에 원이 생기는 배너를 사용하고 있습니다~
힌트 좀 주시면 감사하겠습니다~~~
안녕하세요. 다른 글에 달린 댓글이 많아서 미쳐 글 남기신거를 못봤네요.
이 배너는 이름대로 최소한의 기능으로 간단하게 만든거라서 기능이 미미합니다.
터치로 좌우 슬라이드 하는 기능을 추가하려면, 아무래도 스크립트가 많이 추가되어야 할것 같아요.
그래서 이 경우에는 다른 슬라이드 소스를 활용하시는게 나을듯 합니다.
참고할 만한 링크 남겨요.
Flick Navigation – http://dohoons.com/test/flick/
Swiper – http://idangero.us/swiper/
안녕하세요 롤링 배너 소스 벤치 마킹 하느라 머리가 지끈 했는데, 마침 좋은 소스가 보여서 메일로 요청 드려도 될까요 ?
ahruem.lee@kbsjob.co.kr
감사합니다.
네. 가끔 소스 요청하시는 분이 있어서, 소스 첨부해 놓았어요 ^^
소스가첨부 되어 있네요~ 감사합니다.
안녕하세요.
롤링배너때문에 고민이였는데
소스 부탁드립니다.
power36524@gmail.com
소스 파일 다운로드 링크는 본문에 추가해 두었어요 ^^
안녕하세요 소스 쓰고있는도중 물어볼것이 있어 이렇게 글남깁니다.
prev_next를 응용하려고하는데 처음에 이버튼이 지정이되어있는데 이부분을
이미지로 바꾸고 싶은데 어떡하면 좋을까요 ??
CSS를 보면 .simple_banner_wrap .nav_wrap.prev_next ul li 가 있는데, 여기에 백그라운드 이미지를 적용하거나,
HTML의 li 태그에 이미지를 직접 넣어도 될 듯 합니다.
홈페이지 제작에 꼭 필요했는데 고맙습니다.
도움이 되었다니 다행이네요. ^^a
감사합니다. 잘 사용하겠습니다. 꼭 필요했거든요 ^^
네. 기능이 많은건 아니지만 그래도 유용하게 사용하세요 ^^
사진 페이징 이동만되고 롤링은 멈출수도있나요?
1. 롤링 사용 여부
2. 롤링 원하는 시간(5초에 한번 10초에 한번)
안녕하세요
해당 소스로
1. 롤링 선택 기능(사용자가 롤링 선택을 할 경우에만 롤링하도록)(단 , 페이징은 그대로 가능)
2. 롤링 시간 설정을 할 수 있을까요? (10초에 한번 5초에 한번)
안녕하세요.
2. 시간은 이 속성으로 설정할 수 있습니다. data-interval=”3000″
5초면 5000, 10초면 10000 으로 밀리세컨드로 입력하면 됩니다.
1. 아쉽게 자동롤링 설정은 없네요.
소스를 수정하지 않고 하려면 위에 인터벌에 엄청 큰 시간을 넣어서 롤링이 되지 않는 것처럼 하면 될 것 같고요.
아니면 소스를 조금 수정해서 특정한 데이터 값이 있을 경우에 아래의 타임아웃이 실행되지 않게 해주면 될 듯 합니다.
setTimeout(“sbAnimateBannerTimer(“+i+”)”, itv);