2012/01/26 10:10
안녕하세요!~
이전에 좌우/ 상하 슬라이드쇼 유연하게 처리된 플러그인을 공유했었지요~~
이번에 그 부분을 좀더 업(?) 시켰습니다~
비교하자면..
이전 - 갯수 지정된 것만 움직이고 끝.. 좌우 / 상하 끝에 도착할 경우 롤링 불가..
신규 - 갯수에 상관없이 계속 돌릴수 있도록 수정
무한루프~~
사용방법은 아래와 같아요~
이전버전과 거의 다르지 않습니다.!!~
앗!!.. 첨부파일 부터 올리라고요? 눼눼 ㅜㅠ..
jQuery.slide.js↑↑↑↑↑ 이 파일 받아주세요~
/******************************************************************/
/* 첫번째 파일은 이글 내용에 해당하는 파일입니다. */
/* 두번째 파일은 업글 버전입니다. */
/* - 자동롤링 */
/* - 마우스 오버/ 아웃시 자동롤링 제어등의 기능 추가 */
/******************************************************************/
예제 소스는 아래와 같습니다~
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script> //jquery 경로
<script src="/js/jQuery.slide.js"></script> // 첨부된 파일 경로
<script>
(function($) {
$(function() {
$('#slideshow').slideShow(); // 좌/우
//$('#slidesContainer').slideShow({slideWay:''}); // 상/하
});
}) (jQuery);
</script>
<div id="slideshow">
<div style="width:40px;float:left;"><span id="left">이전</span></div>
<div id="slidesContainer" style="width:260px;height:160px;float:left;overflow:hidden;">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
</div>
<div style="width:40px;float:left;"><span id="right">다음</span></div>
</div>
위 내용을 복사해서 테스트 해보시면 확인하실 수 있습니다.
옵션값 간단한 설명 첨부합니다.
| !! 미리보기 !! 이전
다음 |
첨부파일 하단에 보시면 아래와 같은 내용이 있습니다. 각각 설명입니다!~
옵션 값을 아무것도 주지 않을 경우 아래의 내용으로 실행됩니다.
//기본 옵션!!
jQuery.fn.slideShow.defaults = {
currentPosition: 0, // 시작 번호, 현재 번호
slideWidth: 260, // 가로 사이즈
slideHeight: 160, // 세로 사이즈
slideId: 'slide', // 움직일 내부 슬라이드 클래스명
leftBtnId: 'left', // 왼쪽 버튼 아이디
rigthBtnId: 'right', // 오른쪽 버튼 아이디
slideShowId: 'slideInner', // 슬라이드 내부에 생성될 div 아이디
slideWay: 'left', // 방향
slideLoop: true //반복 여부 false 일 경우 스톱
};
위 기본 옵션에 따르면~
=> 시작 페이지는 첫번째 ( 0 ) 이며,
=> 가로가 260 이고~, 높이가 160 인 사이즈에
=> 움직이는 슬라이드 아이디가 slide 이면서~
=> 이전 버튼 아이디가 'left'
=> 다음 버튼 아이디가 'right'
=> 내부 슬라이드 아이디가 'slideInner'
=> 슬라이드 이동방향이 '좌 / 우' 로 움직이며
=> 슬라이드 반복여부가 'true' 입니다.
지정 방법은 다음과 같아요~
상하로 움직이고 싶을 경우
$('#slideshow').slideShow({slideWay: '' });
반복을 사용하고 싶지 않을 때는
$('#slideshow').slideShow({slideLoop: false });
두번째부터 시작하며 가로 크기가 200 인 슬라이드쇼~
$('#slideshow').slideShow({currentPosition:1, slideWidth:200 });
형태로 설정값 넘겨주시면 됩니다!!!
단, 주의할 점은 width 랑 height 이부분을 수정하면 겉에 div 크기도 조절해주셔야 제대로 나옵니다.!!
많은 질타와 방법 부탁드립니다.
또 만나요~
도움이 되셨으면 하단 추천 버튼 혹은 광고 를 눌러주시는 것도 좋습니다.!!
많은 사람들이 볼 수 있도록 해주세요!~~
'IT > JQuery' 카테고리의 다른 글
| [jQuery] 슬라이드쇼 업그레이드 판!! (15) | 2012/01/26 |
|---|---|
| [jQuery] 파이어폭스 firebug로 디버그 하기 (0) | 2011/03/04 |
| [jQuery] 처음 만든 플러그인 슬라이드쇼!~ 상하/좌우 유연하게.. (0) | 2011/02/21 |
| [jQuery] 관련 파일 링크! (0) | 2011/02/15 |
| [jQuery] 입문!~ 책을 사다! 두둥 (0) | 2011/02/08 |
댓글을 달아 주세요
너무 유용한 팁과 소스네요. :) 감사합니다.
오옷!!~ 블로그가 구려서 그런지 아무도 댓글을 안다셨는데~!!! ㅋㅋ
댓글에 감사합니다 (__);;;
헐...좋네요;; 스킨 수정중인데...사용해 봐야겠어요^^ 유용한 정보 감사요 ㅋ
오, 멋진 글이다. 작성해주셔서 감사합니다.
아, 참고로 <script type="text/javascript"> 라고 명기해주는 게 표준적 사용 방법인데, 그렇게 하지는 않으셨네요. 뭐, 요즘브라우저는 저렇게 명기하지 않아도 자바스크립트인 줄 알아내긴 하지만요.
감사합니다!! ^^ 많은 도움이 됐습니다.
좋은팁! 감사합니다~~ ^^
감사합니다. 근데 첨부파일이 안받아지네요ㅠㅠ
헛.. 저는 다운로드 되는데요..
안되시나요?
드래그 막아 놓고 가져가라고?
헛 ㅈㅅ.. ㅎ
풀었습니다~
소스 감사합니다~
질문이 있는데요. 페이지 로딩과 동시에 slide() 가 실행하려면 어떻게 명령어를 내려야 할까요
로딩과 동시에 slide 가 실행된다.. 라는 뜻은
롤링을 말씀하시는건가요??
롤링이라면 첨부된 파일에서 2번째 파일을 받으셔서 사용하시면 됩니다.
사용 방법은
$('#slidesContainer').slideShow({
slideWay:'', //빈값으로 설정할시 위로 - 기본값 : 좌우
slideWidth:'150',
slideHeight:'20',
slideAuto:true, //true 로 설정할시 자동 롤링 - 기본값 : false
AutoDivId:'slideshow' //slideAuto를 true 로 설정시 마우스 오버/아웃시에 롤링제어 DIV - 기본값 : slideshow
});
윗 부분을 스크립트 태그에 넣으시면 자동으로 실행됩니다.
첨부된 소스 내용을 보시면 아시겠지만..
시간설정도 가능합니다.
잘쓰세요~
$(function() {
이 안에 넣으심 됩니다.
});
혹시 질문이 있습니다.
이미지가 최초 3개가 보여 지고 중간이 0번이 되고 오른쪽이 1번 왼쪽이 끝번호 그리고 왼쪽 오른쪽을 반투명하게 하려면 어떻게 해야 하나요? 그리고 항시 3개가 나와야하거든요......
..... 꼭 좀 답변 부탁드립니다.