jQuery syaku rolling slide : 자동 롤링 및 슬라드 플러그인
jQuery syaku rolling 및 slide 플러그인
제이쿼리용 아이템 롤링 및 슬라이드 플러그인입니다. 왼쪽, 오른쪽, 위, 아래로 슬라이드 되며, 자동 슬라이드도 지원합니다.
한번에 이동할 범위를 임의적으로 조절할 수 있습니다.
특정 버튼을 클릭하여 이동 효과를 줄 수있습니다.
첨부한 압축파일을 풀면 데모소스가 있습니다.
버그가 있으나 일반적으로 사용하는 데에 문제없습니다.
최신 브라우져 및 모바일 모두 원할하게 작동하며, 메모리 사용을 최소화한 소스입니다.
2014.02.21 - 이전 버그 모두 수정, 블릿 기능 추가. (최신버전은 아래의 링크를 이용하세요)
2014/02/21 - [개발노트/jQuery] - jQuery syaku rolling : 자동 슬라드 롤링 블릿 v1.3.0
2015/06/08 - [개발노트/jQuery] - jQuery rolling 플러그인
2012.12.18 - width 변경으로 인해 노출되지 않았던 부분 수정
2012.06.01 - 자동 슬라이드 경우 마우스 오버시 시간 오차 버그 수정
하지만 자동 슬라이드인 경우 이동 버튼으로 강제 이동 시킬 경우 버그 발생.
jQuery Moblie 을 사용할 경우 모바일에서 손가락으로 아이템을 슬라이드 할 수 있음
버그 : 자동 롤링을 사용할 경우 방향 버튼을 이용하여 이동시킬때 딜레이 문제가 발생함.
[사용법]
p_click : 이전 이동
n_click : 다음 이동
srolling : 보여질 아이템들이 노출됨.
<div id="p_click"><<<</div>
<div id="n_click">>>></div>
<div id="srolling" style="position: relative;overflow:hidden;width:100px;height:200px;border:#e0e2ef 1px solid;"></div>
<script> jQuery(function() {
var data = [ "<div>1</div>", "<div>2</div>", "<div>3</div>", "<div>4</div>", "<div>5</div>", "<div>6</div>" ];
jQuery("#srolling").srolling({
data : data, // 노출될 아이템
auto : true, //자동 롤링
width : 100, // 노출될 아이템 크기
height : 30, // 노출될 아이템 크기
item_count : 1, // 이동 될 아이템 수
cache_count : 10, // 임시로 불러올 아이템 수
delay : 1000, // 이동 아이템 딜레이
delay_frame : 5000, // 아이템 흐르는 속도
move : 'top', // 이동 방향 left , right , top , down ;;; 왜 up 으로 안하고 top으로 했지 ㅋ;;;
prev : '#p_click', // < 이동 버튼
next : '#n_click' // > 이동 버튼
});});
</script>
v1.2.0 jquery-syaku.rolling.v1.2.0.zip
v1.1.0 jquery-syaku.rolling.v1.1.0.zip
v1.0.0 jquery-syaku.rolling.zip
'개발노트 > jQuery' 카테고리의 다른 글
소셜네트워크 글 내보내기 : SNS (0) | 2013.04.24 |
---|---|
jQuery Syaku Facebook API : 자바스크립트용 페이스북 API 연동 (15) | 2011.11.02 |
jQuery Syaku LightBox : 이미지 라이트박스 자바스크립트 (0) | 2011.08.16 |
jQuery SimpleTree Drag&Drop plugin (0) | 2010.10.21 |