[scriptaculous] 메인 화면에 사용하면 좋을듯한 스크립트.

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

 <script language="javascript" type="text/javascript" src="http://www.javarush.com/common/js/prototype.js"></script>
 <script language="javascript" type="text/javascript" src="http://www.javarush.com/common/js/scriptaculous.js"></script>

 

<div style="margin-top: 20px; height: 580px;">
 <div id="photoPanel1" style="position: absolute; "><img src="http://www.javarush.com/images/img1.jpg"  /></div>
 <div id="photoPanel2" style="position: absolute; display: none; "><img src="http://www.javarush.com/images/img2.jpg"  /></div>
 <div id="photoPanel3" style="position: absolute; display: none; "><img src="http://www.javarush.com/images/img3.jpg" /></div>
 <div style="position: absolute; margin-top: 450px;">
 <table border="0" cellpadding="10" cellspacing="5" >
 <tr>
  <td style="background-color: red; width: 70px; height: 7px; cursor: hand;" onmouseover="changeMainImage('photopanel1');"></td>
  <td style="background-color: green; width: 70px; height: 7px; cursor: hand;" onmouseover="changeMainImage('photopanel2');"></td>
  <td style="background-color: blue; width: 70px; height: 7px; cursor: hand;" onmouseover="changeMainImage('photopanel3');"></td>
   </tr>
 </table>
  </div>
</div>

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

 var choicePanel = document.getElementById('photopanel1');
 
 function changeMainImage(arg1){
  var obj = document.getElementById(arg1);
 
  if(obj){
   if(obj.id != choicePanel.id){
    new Effect.Fade(choicePanel, { duration : 0.8 , afterFinishInternal : function() {
     new Effect.Appear(obj, { duration : 0.8 } )
    }
   } );
   }
  
   choicePanel = obj;
  }
 } 
 
 var cnt = 1;
 
 function autoChange(){
  changeMainImage('photopanel' + cnt);
 
  setTimeout("autoChange()", 5000);
  cnt++;
  if(cnt >= 4){
   cnt = 1;
  }
 }
 autoChange();
//-->
</script>