Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-03 04:38


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

jQuery syaku rolling slide : 자동 롤링 및 슬라드 플러그인

written by Seok Kyun. Choi. 최석균

 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">&lt;&lt;&lt;</div>
<div id="n_click">&gt;&gt;&gt;</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


http://syaku.tistory.com


댓글 남기기
◀ PREV 1···567891011121314 NEXT ▶