PlugIn

jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 )

by kay posted Feb 09, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

그간 많은 롤링플러그인을 사용해왔으나 이해하기도 쉽고 적용하기도 쉽고 응용하기도 쉽고 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



관련 게시물