kay
조회 수 15094 추천 수 0 댓글 10
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

그간 많은 롤링플러그인을 사용해왔으나 이해하기도 쉽고 적용하기도 쉽고 응용하기도 쉽고 TOP 입니다!!

최석균님(제작자)께 감사드립니다. 


Test Url : http://www.uhoon.co.kr/test/2544.html


플러그인 및 샘플 다운로드 (jquery-syaku.rolling.v1.2.0.zip )


* 제작자님 샘플에는 Javascript 배열에 객체를 직접 담아하도록 되어있으나 

현업에서 편의상 html 태그를 Js에 넣어서 사용하기 힘든바 html 소스에서 읽어와서 

롤링되도록 샘플소스에 적용하였으니 참고해주세요 .


첨부된 샘플 소스는 제작자님께서 제공하시는 그대로입니다.

하여 쬐끔 수정한 샘플 소스자체를 아래 작성합니다.


<!DOCTYPE html>
<html>
<head>
	<title>상하좌우 롤링 ( 버튼 , 자동 )</title>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8">
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="./2544/jquery-syaku.rolling.js"></script>
	<script type="text/javascript">
		jQuery(function() {

			jQuery("#srolling").srolling({
				data : $("#aaa > div"),	// 노출될 아이템
				auto : true,					//자동 롤링	true , false
				width : 20,					// 노출될 아이템 크기
				height : 30,					// 노출될 아이템 크기
				item_count : 1,			// 이동 될 아이템 수
				cache_count : 1,			// 임시로 불러올 아이템 수
				delay : 1000,				// 이동 아이템 딜레이
				delay_frame : 500,		// 아이템 흐르는 속도
				move : 'top',				// 이동 방향 left , right , top , down
				prev : '#p_click',			// < 이동 버튼
				next : '#n_click'			// > 이동 버튼
			});
		});
	</script>
</head>

<body >
<div id="srolling" style="position: relative;overflow:hidden;width:100px;height:30px;border:#e0e2ef 1px solid;"></div>
<div id="aaa" style="display:none;">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
<span id="p_click">이전</span>
<span id="n_click">다음</span>
</body>
</html>

제작자 홈페이지 : http://syaku.tistory.com/202



관련 게시물 

?
  • ?
    방가용 2014.09.26 10:29

    재밌네요 스크롤링 ㅋㅋㅋㅋ 와 좋다

  • ?
    kay 2014.09.26 11:06

  • ?
    안녕하세요 2015.01.26 17:01

    이리저리 소스 찾아보던중 오게되었어요~ 잘 적용해 보겠습니다.

    담아갈게요~

  • ?
    kay 2015.01.27 08:58

     유용하셨다니 ^^ 

  • ?
    이런 2015.02.03 14:23

    저는왜 써주신 코드 그대로 써도 적용이 안되나요ㅠㅠ js파일에서도 바꿔야하나요?ㅠ

  • ?
    kay 2015.02.03 14:25

    jquery-syaku.rolling.js 파일과 Jquery  include만 되어있다면...한번 체크해보셔야할듯합니다.

  • ?
    이런 2015.02.03 15:17

    제가 카페24호스팅에 넣으려고 해서 잘안됐던거였는데 지금은 너무 잘되네요^^ 이게 잴 간단하고 너무너무 좋은것같아요!! 유용한 정보 정말 감사드립니다ㅠㅠ

  • ?
    kay 2015.02.04 10:29

    댓글에 힘이 솟아나네요 감사합니다!

  • ?
    rrr 2015.08.18 09:18

    자동롤리하고 있을떄 멈추는방법은 없나요???

  • ?
    kay 2015.08.19 15:47

    마우스 오버시 현재 정지되는 기능이 구현된 상태입니다.

    해당 소스 코드는 jquery-syaku.rolling.js 파일에 보시면 아래와 같은 소스코드가 보이실겁니다.

    mouseover 조건을 클릭등 다른 Function으로 구현하셔서 호출하시면 됩니다.


    jQuery(box_area).mouseover(function() {
            if (auto) {
              clearTimeout(sTime);
              auto_go = false;
            }
          });

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
54 UI 특정 객체가 화면에 보이는지 여부 확인 kay 2015.12.14 653
53 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 475
52 UI Select Box Option 동적 추가 , 삭제 , 복사 kay 2015.09.18 2190
51 etc FadeIn , FadeOut 을 이용한 간단한 메인 배너 이미지 노출. kay 2014.10.23 2129
50 etc 기본값 가져오기 get default value kay 2014.10.19 1434
49 UI woothemes FlexSlider - 슬라이더 file kay 2014.09.16 5685
48 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 4729
47 UI Jquery Slider Bar / 슬라이더 바 3종 샘플 file kay 2014.07.28 5507
46 etc 페이지 또는 객체에서 특정 키워드 강조하기 2 kay 2014.06.14 2346
45 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 8920
44 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 10595
43 etc 우클릭 , 셀 선택 , 드래그 방지 스크립트 kay 2014.02.17 7537
42 etc Jquery Load 유무 체크하기 kay 2014.02.12 3637
» PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 15094
40 etc Table에 동적 Tr 추가/삭제 하기 kay 2014.02.09 18786
39 etc 한글/영어 byte 체크해서 자르기 1 kay 2013.11.30 8738
38 UI 동적으로 추가된 객체에 datepicker() 적용하기 kay 2013.11.06 6614
37 etc $.trim(str) trim... kay 2013.10.16 3607
36 A to Z Jquery 로 defaultValue 읽어오기 kay 2013.10.03 3476
35 A to Z readonly , disabled 지정하기 kay 2013.10.01 3864
Board Pagination Prev 1 2 3 Next
/ 3
CLOSE