<script> <!-- s:  banner -->
 //배열에 이미지 주소 넣기
 var img_arr=new Array("event1.jpg","event2.jpg","event3.jpg","event4.jpg","event5.jpg","event6.jpg");
 var link_arr=new Array("javascript:gopcurl('');","javascript:gopcurl('');","","");
 var tmp=0;  //현재 출력되는 이미지
 var tot=img_arr.length-1;  // 전체 배열의 갯수
 var timer //setInterval을 담을 변수
 var direction=1; //방향 1이면 정방향 -1이면 역방향
 startRoll();
 //페이지 접속시 배열0의 이미지를 target에 넣는다
 //페이지 접속시 startRoll()을 실행
 window.onload=function(){
  document.getElementById("target").src="{$layout_info->path}/images/"+img_arr[0];
  //window.clearInterval(timer);
  //startRoll();
 }

 function roll(val){
  if(!val){
   val=direction;
  }else{
   direction=val;
  }
  tmp=tmp+val;
  //tmp 가 0보다 작으면 tmp 에는 마지막 배열
  //tmp 가 마지막 배열 숫자보다 크면 0
  if(tmp<0){
   tmp=tot;
  }else if(tmp>tot){
   tmp=0;
  }
  //target에 img_arr에 tmp 값 넣기
  document.getElementById("target").src="{$layout_info->path}/images/"+img_arr[tmp];
 }
 //timer멈춤
 function stopRoll(){
  window.clearInterval(timer);
 }
 function gourl(){
  location.href=link_arr[tmp];
 }

 //3초 마다 한번씩 roll()함수 실행
 function startRoll(){
  timer=window.setInterval("roll()",3000);
 }
</script><!-- e: banner  -->

 

  <div class="cont1">
  <div style="position:relative;text-align:center;">
   <div style="position:relative;"><img id="target" onMouseOver="stopRoll()" onMouseOut="startRoll()" style="cursor:pointer;width:80%;" onclick="gourl()"></div>
   <div style="position:absolute;width:50%;top:50%;margin-top:-9%;left:2%;text-align:left;"><img src="./images/m_arrow_l.png" style="cursor:pointer;width:10%;" onclick="roll(-1)"></div>
   <div style="position:absolute;width:50%;top:50%;margin-top:-9%;right:2%;text-align:right;"><img src="./images/m_arrow_r.png"  style="cursor:pointer;width:10%;" onclick="roll(1)"></div>
  </div>
 </div>