아름답고도 사랑스러운 공대여자님!

현재 캐나다관련 사이트를 만들다 우연히 본 "아름답고도 사랑스러운 공대여자"님의 롤배너 작품.

무려 5시간을 헤메다 우연히 찾게됐습니다.(phpschool팁앤테크를 통해서)

소스를 여기다 올려도 돼는지 모르겠지만 일단 올려보겠습니다.

<소스>

/*--------------------------------
롤링배너
만든이 : mins01(공대여자)
hp : mins01.woobi.co.kr
MSN & NateOn : mins01(at)lycos.co.kr
------------=----------------------
사용법
<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
<div>
처럼 구조를 가져야합니다.
안의 <div>는 꼭 style.height 값을 가져야합니다.
안에서 <div>가 아닌 것은 전부 삭제됩니다.

var roll2 = new rolling_banner(document.getElementById('test2')); 
roll2.start();

처럼 스크립트를 실행하면 됩니다.
----------------------------------*/

var rolling_banner = function(ta){
 this.ta = ta;
// this.ta.className = 'rolling_banner'; 
 this.ta_id = 'roll_'+(this.ta.id||this.ta.name);
 this.gap = 5;     //움직이는 픽셀단위
 this.gap_count=0;   //카운팅용:건들지 마세요
 this.gap_time = '1000';  //움직이는 단위시간
 this.gap_sleep = '2000'; //화면이 멈춰있을 단위시간
 this.over_stop = true;  //마우스를 올렸을 때 멈출 것인가?
 this.timer = null;
 eval(this.ta_id+'=this');
 var temp = eval(this.ta_id);
 this.init_div(); 
}
rolling_banner.prototype.start = function(){ //롤링 시작
 this.ta.readonly =false;
 this.stop =false; 
 if(!this.timer){ this.rolling();  }
}
rolling_banner.prototype.stop = function(){ //롤링 시작
 this.stop =true;
}
rolling_banner.prototype.init_div = function(){ //<div> 빼고 전부 제거 , 스타일 초기화
 this.ta.style.position="relative";
 this.ta.style.overflow="hidden";
   this.ta.onmouseover=function(){ eval("this.readOnly=true;"); }
   this.ta.onmouseout=function(){ eval("this.readOnly=false;"); }

 var child = this.ta.childNodes;
 var ch = this.ta.firstChild;
 var ch2 = null;
 while(ch){
  ch2 = ch.nextSibling;
  if(ch.nodeName.toLowerCase() !='div'){
  this.ta.removeChild(ch);
  }else{
  ch.style.position = "relative";
  ch.style.borderStyle='none';
  ch.style.top='0px';
  }
  ch=ch2;
 }
}
rolling_banner.prototype.strtonum = function(str){
 var num = parseInt(str);
 if(isNaN(num)) num = '0';
 return num
}
rolling_banner.prototype.strtopx = function(str){
 var num = this.strtonum(str);
 return num+'px';
}
rolling_banner.prototype.rolling = function(){
 if(this.gap_count==0){
  this.sleep();
  this.gap_count+=1;
  return;
 }
 if(!this.ta.readOnly && !this.stop){
  this.rolling_top();
 }
 this.timer = null;
 var re = this.ta_id+'.rolling()';
 this.timer = setTimeout(re,this.gap_time);
}
rolling_banner.prototype.rolling_top = function(){
 this.gap_count+=parseInt(this.gap);
 var ch1 = this.ta.firstChild;
 var child = this.ta.childNodes;
 var ta_ch = null;
 var top_ori = this.strtonum(child[0].style.top);
 var top = this.strtopx(top_ori-parseInt(this.gap));   
 for(var i=0,m=child.length;i<m;i++){
  child[i].style.top=top;
 }
 if(this.gap_count >= this.strtonum(ch1.style.height)){
  var temp =ch1.cloneNode(true); 
  this.ta.removeChild(ch1);
  this.ta.appendChild(temp);
  for(var i=0,m=child.length;i<m;i++){
   child[i].style.top='0px';
  }  
 this.gap_count = 0  
 }
}
rolling_banner.prototype.sleep = function(){
 this.timer = null;
 var re = this.ta_id+'.rolling()';
 this.timer = setTimeout(re,this.gap_sleep);
}
------

뿌려지는 화면

 <div id="test" style="width:269px; height:100px;  background-color:#CCCCCC;" >
 <div style="width:269px; height:100px;"><a href="#"><img src="<?=$this_skin?>/b_img_add/banner/banner1.jpg" border="0"></a></div>
       <div style="width:269px; height:100px;"><a href="#"><img src="<?=$this_skin?>/b_img_add/banner/banner2.jpg" border="0"></a></div>
       <div style="width:269px; height:100px;"><a href="#"><img src="<?=$this_skin?>/b_img_add/banner/banner3.jpg" border="0"></a></div>
       </div>
      <script>
      var roll1 = new rolling_banner(document.getElementById('test'));
      roll1.gap=1;
      roll1.gap_time = '1'; 
      roll1.gap_sleep = '1000';
      roll1.start();
      </script>

-----------------

질문:

위에 보시는 것처럼 3개의 배너를 붙여서 나오게 했는데 나오는 순서는 항상 banner1, banner2, banner3 입니다. 이렇게 되면 항상 첫 배너가(banner1) 먼저 나오기 때문에 불공평하다 생각되어 랜덤으로 보여주게 할려고 합니다. (ex: 1,2,3 ... 2,3,1... 3,1,2....2,3,1 이런식으로요)

배열로 값을 받아서 뿌려주면 될거 같은데 제가 워낙 초보라 어찌해야 할지 모르겠네요.ㅡㅡ

염치없게도 얻어쓰는 주제에 하나 더 달라는 심뽀같지만 너그러이 이해해주시고 답변바랍니다.

(ps. 혹시 밴쿠버(캐나다) 놀러오시게되면 하루 관광안내 해드리겠습니다.)