첨부파일 https://eond.com/jquery/361898

데모 페이지
http://syakuis.github.io/demo/jquery-slider-rolling/demo.html

"jQuery rolling slider : 자동 슬라드 롤링 그리고 블릿 플러그인"

 

jQuery 용 플러그인이며, 이미지나 대상 아이템들을 왼쪽, 오른쪽, 위, 아래로 이동 (롤링및 슬라이드) 시킬 수 있는 기능입니다.

 

이동방향으로 자동으로 실행시킬 수 있으며, 수동으로 방향버튼을 클릭하여 이동시킬 수도 있습니다.

마지막으로 대상 아이템 수만큼 표시되는 블릿을 이용하여 이동시킬 수있습니다.

 

html 디자인은 사용자가 직접 자유롭게 꾸밀수 있도록 최대한 커스텀하게 구현하였습니다.

그리고 이전 버전에 있었던 버그들은 모두 수정하였습니다.
 

# 기존의 롤링 슬라이더를 대폭 개선한 새로운 버전입니다. 사용법은 거의 비슷하며 기존처럼 심플합니다.
2015/06/08 - [개발노트/jQuery] - jQuery rolling 플러그인

 

** 블릿 기능은 요청자가 있어 추가 개발하였습니다.

** 소스파일은 맨 하단에 첨부하였습니다.

 

*최신정보 받기

# Github : https://github.com/syakuis/jquery-slider-rolling

# 데모 : http://syakuis.github.io/demo/jquery-slider-rolling/demo.html

 

[2014.02.22] v1.3.1 이전 문제 모두 수정 (단, 아이템이 이동될때 마우스 오버시 멈추지않는 문제있음. 큰 문제는 아님. 수정예정)

[2014.02.22] v1.3.0 업데이트

                  블릿을 연속으로 누르면 버그발생 (수정중... 테스트를 완벽히 했다고 생각했건만;;;)

 

 

압축 파일에 데모가 있습니다. 직접 실행해보시면 이해가 쉽습니다.

데모화면 디자인은 그냥 데모일뿐, 직접 멋지게 꾸미시기 바랍니다~

 

 

 

 

 

 

기본 소스 예제

 

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 : [ ], // 롤링될 아이템 데이터

      item_count : 1, // 한번 이동될 아이템 수

      cache_count : 5, // 최초 한번 임시로 생성될 아이템 수 (고치지마세요)

      width : 100, // 노출될 아이템 크기 (필수 : 실제 아이템 보다 약간 크게 설정하세요)

      height : 100, // 노출될 아이템 크기 (필수 : 실제 아이템 보다 약간 크게 설정하세요)

      auto : false, // 자동 이동 설정

      delay : 1000, // 이동 후 대기 시간

      delay_frame : 500, // 이동 속도

      move : 'left', // 이동 방향 left , right , up , down 

      prev : '#srolling_prev', // 이전 아이템 이동 버튼 element

      next : '#srolling_next', // 다음 아이템 이동 버튼 element

      is_bullet : false, // 블릿 사용여부

      bullet : '#srolling_bullet', // 블릿 버튼 element

      bullet_item : '#srolling_bullet_item', // 블릿 버튼 item element

      bullet_style_func : null // 선택된 블릿 효과주기

}); 


});
</script> 

 

소스파일

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 142 articles in 4 / 8 pages
번호 제목 제목 날짜날짜
공지 슬라이더 스크립트 4종 2016/07/03 0
공지 jQuery 추천 사이트 2015/06/08 0
82 [질문] 천천히 흐르는 배너, 제어 버튼 파일 2015/09/03 0
81 [플러그인] 여러 플러그인을 소개한 블로그 2015/09/13 0
80 [ticker] 제이쿼리 플러그인 사이트, ticker 플러그인 2015/09/12 0
79 [팁] [jQuery] 페이지 부드럽게 이동하는법 2015/09/12 0
78 [추천사이트] jQuery 관련 추천 블로그 2015/09/03 0
77 [Banner] 배너에 사용할 플러그인 모음 2015/09/04 0
76 [플러그인] jquery plugin 2015/09/04 0
75 [플러그인] animatescroll 부드럽게 스크롤링되는 유용한 플러그인 2015/09/04 0
74 [추천사이트] 제이쿼리 플러그인을 종류별로 모아둔 블로그 2015/09/04 0
73 [슬라이더 플러그인] jcarousellite 2015/09/04 0
72 [플러그인] 제이쿼리 플러그인 모음(2) 2015/09/04 0
71 [슬라이더 플러그인] 제이쿼리 플러그인 모음 2015/09/04 0
70 [팁] undefined 와 null 의 차이 JAVASCRIPT / 0과 1, true, false, null, undefined의 차이 2015/09/03 0
69 [ticker] jQuery scrollnews 2015/09/04 0
68 [슬라이더 플러그인] [jQuery] Smooth div scroll (왼쪽으로 흐르는 이미지/글자) 파일 2015/09/03 0
67 [추천사이트] jQuery Plug-in 2015/09/03 0
66 [추천사이트] 위젯으로 활용할 소스가 많은 사이트 2015/09/03 0
65 [고급활용] 클릭하면 확대되는 이미지, 슬라이드, 닫기 기능(여은주) 2015/09/03 0
현재글 [슬라이더 플러그인] jQuery rolling slider : 자동 슬라드 롤링 블릿 플러그인(샤쿠(최석균)) 2015/09/03 0
63 [슬라이더 플러그인] 스크롤링 이미지 슬라이더 2015/09/03 0

해시태그 디렉터리