-
728x90
그간 많은 롤링플러그인을 사용해왔으나 이해하기도 쉽고 적용하기도 쉽고 응용하기도 쉽고 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>11111</div> <div>22222</div> <div>33333</div> <div>44444</div> <div>55555</div> <div>66666</div> </div> <span id="p_click">이전</span> <span id="n_click">다음</span> </body> </html>728x90댓글
꼰대 개발자의 블로그
꼰대가 흐름을 따라가고 싶어서 기록하는 블로그
