mootoools를 이용한 maintype

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>

<script language="javascript" src="<?=$g4[path]?>/js/mootools.svn.js" type="text/javascript"></script>

<style type="text/css">
#NewsTicker{
 border:solid 1px #cccccc;
 width:570px;
 height:185px;
 margin:0 5px;
}
 #NewsTicker h1{
 padding:6px;
 margin:0;
 border:0;
 background:#dfe7ed;
 color:#000000;
 font-size:11px;
 font-weight:bold;
 }
 #NewsVertical {
 width: 570px;
 height: 185px;
 display: block;
 overflow: hidden;
 position: relative;
 }
/* --------------- */
/* Ticker Vertical */
 #TickerVertical {
 width: 580px;
 height: 140px;
 display: block;
 list-style: none;
 margin: 0;
 padding: 0;
 }
 #TickerVertical li {
 width: 120px;
 color: #444444;
 text-align: center;
 font-size: 11px;
 margin: 0;
 padding: 6px 10px;
 float: left;
 height: 164px;
 display: inline;
 }
  #TickerVertical li .NewsTitle{
   display: block;
   color: #d3743e;
   font-size: 11px;
   margin-bottom:6;
  }
  #TickerVertical li .NewsTitle a:link,
  #TickerVertical li .NewsTitle a:Visited {
   display: block;
   color: #bdaca7;
   margin-bottom:6px;
   text-decoration:none;
  }
  #TickerVertical li .NewsTitle a:hover {
   color: #ff1a00;
   text-decoration:underline;
  }
  
  #TickerVertical li .NewsImg{
   float:left;
   border:solid 1px #DEDEDE;
  }
  
  #TickerVertical li .NewsImg a:hover {
   border:solid 1px #ff1a00;
  }
  
  #TickerVertical li .NewsFooter{
   display: block;
   font-size: 11px;
   margin:6px 0 14px 0;
   color: #dd4215
  }
</style>

<div id="NewsTicker">

 <h2><? echo "<a href='$g4[shop_path]/listtype.php?type={$type}'><img src='$g4[shop_img_path]/bar_type{$type}.gif' border=0 /></a><br>"; ?></h2>
 <div id="NewsVertical">
  <ul id="TickerVertical">

<?
for ($i=0; $row=sql_fetch_array($result); $i++)
{
    if ($i > 0 && $i % $list_mod == 0)
        echo "";

    $href = "<a href='$g4[shop_path]/item.php?it_id=$row[it_id]' class=item>";
?>

 <li>
            <?=$href?><?=get_it_image($row[it_id]."_s", $img_width, $img_height)?></a>
            <span class="NewsTitle">
            <?=$href?><?=cut_str(stripslashes($row[it_name]), 30)?></a>            </span>
        <span class="NewsFooter"><strong><?=display_amount(get_amount($row), $row[it_tel_inq])?></strong> </span>       
 </li>
 
 

<?
/*
// 이미지 오른쪽에 구분선을 두는 경우 (이미지로 대체 가능)
    if ($i%$list_mod!=$list_mod-1)
        echo "<td width=1 bgcolor=#eeeeee></td>";
*/
}

// 나머지 td 를 채운다.
if (($cnt = $i%$list_mod) != 0)
    for ($k=$cnt; $k<$list_mod; $k++)
        echo "";
?>

</ul>
 </div>
 
</div>

<script language="javascript" type="text/javascript">

   var Ticker = new Class({
    setOptions: function(options) {
     this.options = Object.extend({
      speed: 5000,
      delay: 5000,
      direction: 'vertical',
      onComplete: Class.empty,
      onStart: Class.empty
     }, options || {});
    },
    initialize: function(el,options){
     this.setOptions(options);
     this.el = $(el);
     this.items = this.el.getElements('li');
     var w = 0;
     var h = 0;
     if(this.options.direction.toLowerCase()=='horizontal') {
      h = this.el.getSize().size.y;
      this.items.each(function(li,index) {
       w += li.getSize().size.x;
      });
     } else {
      w = this.el.getSize().size.x;
      this.items.each(function(li,index) {
       h += li.getSize().size.y;
      });
     }
     this.el.setStyles({
      position: 'absolute',
      top: 0,
      left: 0,
      width: w,
      height: h
     });
     this.fx = new Fx.Styles(this.el,{duration:this.options.speed,onComplete:function() {
      var i = (this.current==0)?this.items.length:this.current;
      this.items[i-1].injectInside(this.el);
      this.el.setStyles({
       left:0,
       top:0
      });
     }.bind(this)});
     this.current = 0;
     this.next();
    },
    next: function() {
     this.current++;
     if (this.current >= this.items.length) this.current = 0;
     var pos = this.items[this.current];
     this.fx.start({
      top: -pos.offsetTop,
      left: -pos.offsetLeft
     });
     this.next.bind(this).delay(this.options.delay+this.options.speed);
    }
   });

   var hor = new Ticker('TickerVertical',{speed:1000,delay:4000,direction:'horizontal'});
  </script>

mootools 스크립트는 알아서 구하셔야 합니다.
소스 원본의 출처는 잊어먹었어요..
원본을 토대로 수정하였습니다.
크기 조절은 css부분 보시면 되겠습니다.

보다보니 필요없어진 원본파일들이 존재하는군요....으흐흐흐...