팝업존 로직을 아시아경제( www.asiae.co.kr )의 코드를 응용해서 만들었습니다.

자동롤링은 안되고요, 화살표 버튼을 클릭하면 하나씩 화면이 바뀌면서 보입니다.
이미지 클릭하면 새창으로 HTML이 열립니다.

이미지 롤링되는 팝업존 로직 있으면 공유 또는 아래 것을 롤링되도록 조언 부탁드립니다.

<style type="text/css">
.popupZone { width: 266px; height: 77px; padding: 10px 0px 0px 0px; clear: both; border-top: 1px solid #b7b7b7; border-bottom: 1px solid #ddd; }
.popupZone .left { width: 265px; float: left; position: relative; }
.popupZone .right { width: 265px; float: right; position: relative; }
.popupZone h3 { color: #333944; font-size: 14px; letter-spacing: -1px; margin-bottom: 8px; }
.popupZone .move { width: 265px; height: 77px;position: relative;  }
.popupZone .move a { width: 265px; height: 77px; display: block; position: relative; overflow: hidden; color: #fff; }
.popupZone .move span { width: 265px; height: 20px; padding-top: 3px; *padding-top:5px; background: #000000; color:#fff; opacity: 0.8; text-align: center; font-weight: normal; display: block; position: absolute; bottom: 0px; left: 0px; filter: alpha(opacity=80) }
.popupZone .popupZone_btn { position: absolute; top: -5px; right: 0px; width: 70px; height: 20px; }
.popupZone .right .move { overflow: hidden; }
.popupZone .right .move img { margin: 0px 0px 0px 0px; }

.popupZone a:link { color: #4d576c; text-decoration: none; font-size: 12px; }
.popupZone a:visited { color: #9374aa; text-decoration: none; font-size: 12px; }
.popupZone a:active { color: #4d576c; text-decoration: underline; font-size: 12px; }
.popupZone a:hover { color: #4d576c; text-decoration: underline; font-size: 12px; }

.popupZone_btn a strong { display: none }
.popupZone_btn .info { float: left; width: 30px; text-align: center; padding-top: 2px; font-size: 12px; }
.popupZone_btn .info span { color: #286393; font-family: Verdana, Geneva, sans-serif; }
.popupZone_btn a { width: 20px; height: 20px; display: block; float: left; }
.popupZone_btn .pre { background: url('popup/btn_all.gif') 0 0px no-repeat; }
.popupZone_btn .next { background: url('popup/btn_all.gif') -150px 0px no-repeat; float: right; }
.popupZone_btn .pre:hover { background: url('popup/btn_all.gif') -30px 0px no-repeat; }
.popupZone_btn .pre:active { background: url('popup/btn_all.gif') -60px 0px no-repeat; }
.popupZone_btn .next:hover { background: url('popup/btn_all.gif') -120px 0px no-repeat; float: right; }
.popupZone_btn .next:active { background: url('popup/btn_all.gif') -90px 0px no-repeat; float: right; }
</style>

<script type="text/javascript" src="popup/jquery.min-1.5.2.js"></script>
<script type="text/javascript">jQuery.noConflict();var j$ = jQuery;</script>
<div class="popupZone">
  <div class="left">
    &nbsp;팝업존
    <div class="popupZone_btn">
      <!--  // 사용법
      <a href="javascript:changeList('p',팝업총수,1,'bp');" class="pre" title="이전" id="bpPre"><strong>이전</strong></a>
      <div class="info"><span id="bpPg">1</span>/팝업총수</div>
      <a href="javascript:changeList('n',팝업총수,1,'bp');" class="next" title="다음" id="bpNext"><strong>다음</strong></a>
      -->
      <a href="javascript:changeList('p',2,1,'bp');" class="pre" title="이전" id="bpPre"><strong>이전</strong></a>
      <div class="info"><span id="bpPg">1</span>/2</div>
      <a href="javascript:changeList('n',2,1,'bp');" class="next" title="다음" id="bpNext"><strong>다음</strong></a>
    </div>
    <div class="move">
      <a href="#" id="bp1" style="display:block;" onclick="window.open('popup/2012_1018/popup.html','PopupZone_bp1','width=400, height=430, scrollbars=no, menubar=no'); return false">
        <img src="popup/2012_1018/popup_s.jpg" width="265" height="77" border="0" alt="테크플러스 2012" />
        <!--<span>테크플러스 2012</span>--></a>
      <a href="#" id="bp2" style="display:none;" onclick="window.open('popup/2012_1008/popup.html','PopupZone_bp2','width=350, height=461, scrollbars=no, menubar=no'); return false">
        <img src="popup/2012_1008/popup_s.jpg" width="265" height="77" border="0" alt="세라와 믹을 찾아라" />
        <!--<span>세라와 믹을 찾아라!</span>--></a>
    </div>
  </div>
</div>
<script type="text/javascript">
<!--
// 팝업존 버튼 제어
function changeList(type,total,now,id)
{
  var viewPg = 0;
  for(var i=1;i<=total;i++)
  {
    j$('#'+id+i).css({'display':'none'});
  }

  if(type=='p')
  {
    viewPg = now-1;
    if(viewPg<=0) viewPg = total;
  }
  else
  {
    viewPg = now+1;
  if(viewPg>total) viewPg = 1;
  }

  j$('#'+id+viewPg).css({'display':'block'});
  j$('#'+id+'Pg').html(viewPg);
  j$('#'+id+'Pre').attr("href", "javascript:changeList('p',"+total+","+viewPg+",'"+id+"');");
  j$('#'+id+'Next').attr("href", "javascript:changeList('n',"+total+","+viewPg+",'"+id+"');");
}
//-->
</script>