jquery로 이미지 롤링 시키는 코드...

음 이미지 롤링이야 워낙에 많으니깐 이것도 그중하나..음 뭐랄까

좀더 깔끔하게 만들었다고 나 할까나... 저번에 올린건 영...ㅋㅋ

이게더 나은거 가틈..사실 거기서 거기 내실력이 미천하여....

담에 쓸일 생기면 다시 수정해야지 우선 귀찮으니깐 패스.

첨부파일 : jq.rolling_.zip

소스
=================================================================================================================
<style type="text/css">

/*스크롤러 스타일*/

div#scroller {position:relative; height:165px; width:888px; padding:0;margin:0 auto;clear:both;overflow:hidden;border:1px solid #CCC }
ul#scrollerFrame {width:1000px; padding:0;margin:0;list-style:none;}
#rolling {position:relative;float:left; padding-top:5px; padding-bottom:5px;width:230px;height:155px;}
</style> 

<script type="text/javascript">
 $(function() {
  var rollingDiv = $("#rolling");

  rollingDiv.rolling("left", 215, 165, 8); //방향,가로크기,세로크기,이미지표시갯수
  rollingDiv.bind("mouseover", function() { //마우스 오버시 멈춤
   $("#rolling").stopRolling();
  });
  rollingDiv.bind("mouseout", function() { //마우스 아웃시 다시동작
   $("#rolling").resumeRolling();
  });

<?php //DB에서 이미지 읽어와서 뿌리기
  foreach($rs_img as $row):

 echo " rollingDiv.addRollingItem(\"<img src='".$row->file_url."' width='210' height='155' style='z-index:1000; <BR>padding-top:5px; padding-left:5px;' />\"); ";
  endforeach;
?>

  rollingDiv.startRolling(10, 0, 250); //250 이게 스크롤링 속도 입니다. 낮을수록 빠름

 });
</script>
=================================================================================================================

해당 이미지롤링할 부분에 밑에 div소스 넣으면 됩니다.
크기나 그런건 위에 style에서 바꾸면 되구요.!

<div id="scroller">
             <ul id="scrollerFrame">
                 <li id="rolling"></li>
             </ul>
</div> 


ps. IE6,7 이랑 IE8이랑 속도가 다르게 나옵니다. 6,7버전에서는 빠르게 지나가는데 8에선 느림.