<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>