My Name is Kay....

DIY , 먹방 , 개발 , 육아 , 여행 좋아합니다.
AdBlock 사용시 화면이 정상적으로 노출되지 않습니다.
포스팅 관련 문의 및 개발 문의는 Email : wkzkfmxksi@gmail.com

추가 포스팅이 이뤄지지 않는 블로그입니다. 문의는 wkzkfmxksi@gmail.com 으로 연락주세요.
kay
조회 수 20152 추천 수 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
번호 분류 제목 글쓴이 날짜 조회 수
18 PlugIn jQuery Formatnumber , 콤마처리 kay 2015.11.03 2078
17 PlugIn jQuery Org Chart - 조직도 그리기 file kay 2014.09.01 16605
16 PlugIn Star Rating Plugin - jQuery 별점 주기 2 file kay 2014.05.01 13219
15 PlugIn jQuery Plugin For Auto Resizing iFrame - iFrame Resizer file kay 2014.03.10 105355
» PlugIn jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 ) 10 file kay 2014.02.09 20152
13 PlugIn 스크롤 따라 다니는 배너 file kay 2013.09.14 4517
12 PlugIn Tree 메뉴만들기 1 file kay 2013.08.14 5642
11 PlugIn 자동 롤링 배너 Jquery 2 file kay 2013.08.07 13877
10 PlugIn Moodular - 회전,슬라이더, 터치 ,모자이크 kay 2013.05.04 5352
9 PlugIn sliding horizontal parallax - parallax 공부 샘플 kay 2013.04.17 6151
8 PlugIn jQuery Zoom - 이미지 줌 제어 ( 휠 , 클릭 , 오버 ) kay 2013.04.17 8421
7 PlugIn fancyBox - 레이어팝업 (추천) kay 2013.04.16 32407
6 PlugIn makisu - 메뉴 접기(?) kay 2013.04.16 18446
5 PlugIn poshytip - 툴팁 kay 2013.04.15 11803
4 PlugIn tiptip - 툴팁 kay 2013.04.14 17886
3 PlugIn vGrid - 브라우저 너비에 따른 가변 그리드 1 kay 2013.04.08 6956
2 PlugIn Smooth Scroll - 스크롤 이동 ( 속도 , 위치 ) 2 file kay 2013.04.06 12676
1 PlugIn lightBox2 - 레이어 팝업 file kay 2013.04.06 6109
Board Pagination Prev 1 Next
/ 1