Slide for Prototype & Scriptaculous

[출처] http://www.maengis.com/factory/slide4ps/

Slide_maengis.7z

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

<div id="roller">     <div id="rollerBgTop"></div>     <div id="rollerBody">               <div id="bannerSelector">             <img src="./btn_arrow_left_off.gif" alt="좌측 이동" id="btnArrowLeft">             <div id="bannerBox">                 <div id="bannerList">                     <ul>                         <li><img src="./bn_1.jpg" alt="Dummy Image 1"></li>                         <li><img src="./bn_2.jpg" alt="Dummy Image 2"></li>                         <li><img src="./bn_3.jpg" alt="Dummy Image 3"></li>                         <li><img src="./bn_4.jpg" alt="Dummy Image 4"></li>                         <li><img src="./bn_5.jpg" alt="Dummy Image 5"></li>                         <li><img src="./bn_6.jpg" alt="Dummy Image 6"></li>                     </ul>                 </div>             </div>               <img src="./btn_arrow_right_off.gif" alt="우측 이동" id="btnArrowRight">         </div>     </div>       <div id="rollerBgBottom"></div> </div>     <script> slider = new slide('bannerList', 441, 2); // 객체 생성, bannerList라는 ID를 움직이게 하고, 움직이는 간격은 441픽셀, 최대 페이지 수는 2 $('btnArrowLeft').observe('click', function(){slider.play('prev')}); $('btnArrowRight').observe('click', function(){slider.play('next')}); // 생성된 slider객체의 play 메소드를 이용해여 해당 버튼을 클릭하면 좌우로 이동하게 합니다. // slider.play('prev')는 좌측 이동, slider.play('next')는 우측 이동입니다. </script>     <style> div#roller div#rollerBody div#bannerSelector div#bannerBox {     float:left;     position:relative; // 꼭 있어야 합니다.     width:466px;     height:92px;     margin:0 1px;     overflow:hidden; // 꼭 있어야 합니다. }   div#roller div#rollerBody div#bannerSelector div#bannerBox div#bannerList {     position:absolute; // 꼭 있어야 합니다.     top:0;     left:0;     width:10000px; // 없어도 되지만, 있는게 좋습니다. } </style>