¼Ò½º
<table align="center" border="1" onmouseover="isPause='Y'" onmouseout="isPause='N'">
<tr>
<td>
<div style="position:relative;width:750;height:268;overflow-x:hidden">
<span id="img1" style="position:absolute;left:0"><img src="/images/helper/smp_400_05.jpg"></span>
<span id="img2" style="position:absolute;left:0"><img src="/images/helper/smp_400_07.jpg"></span>
<span id="img3" style="position:absolute;left:0"><img src="/images/helper/smp_400_08.jpg"></span>
<span id="img4" style="position:absolute;left:0"><img src="/images/helper/smp_400_10.jpg"></span>
<span id="img5" style="position:absolute;left:0"><img src="/images/helper/smp_400_15.jpg"></span>
<span id="img6" style="position:absolute;left:0"><img src="/images/helper/smp_400_16.jpg"></span>
<span id="img7" style="position:absolute;left:0"><img src="/images/helper/smp_400_17.jpg"></span>
<span id="img8" style="position:absolute;left:0"><img src="/images/helper/smp_400_18.jpg"></span>
<span id="img9" style="position:absolute;left:0"><img src="/images/helper/smp_400_20.jpg"></span>
</div>
</td>
</tr>
</table>
<p align="center">¸¶¿ì½º°¡ ¿Ã¶ó¿À¸é ¸ØÃã´Ï´Ù. <input type="button" value="¹æÇ⠹ٲٱâ" onclick="dirChange()"></p>
<script language="JavaScript">
<!--
var isPause = 'N';
var directions = '>'; // ½ºÅ©·Ñ ¹æÇâ < , >
var nums = 9; // À̹ÌÁö °¹¼ö
var speed = 5; // Çѹø¿¡ ¿òÁ÷ÀÌ´Â px
var imgWidth = 400; // À̹ÌÁö °¡·Î px
var tableWidth = 750; // À̹ÌÁö°¡ µé¾îÀÖ´Â DIV °¡·Îpx
// * ·¹À̾î À§Ä¡ÁöÁ¤
function setPosition(str,str2,str3){ // À̸§, À§Ä¡, Á¾·ù(left,top):l,t
if(str3 == 'l')document.getElementById(str).style.left = str2;
else if(str3 == 't')document.getElementById(str).style.top = str2;
}
// * ·¹À̾î À§Ä¡Á¤º¸
function getPosition(str,str2){ // À̸§, Á¾·ù(left,top):l,t
if(str2 == 'l')return parseInt(document.getElementById(str).style.left.replace('px',''));
else if(str2 == 't')return parseInt(document.getElementById(str).style.top.replace('px',''));
}
// * ½ºÅ©·Ñ·¯
function moves(){
var cutRightPosi = imgWidth * (nums-1);
var tmp = tableWidth - imgWidth;
if(isPause == 'N'){
for(var i=1; i<=nums ; i++){
if(directions == '>'){
if(getPosition('img'+i, 'l') >= cutRightPosi)setPosition('img'+i, -imgWidth, 'l');
setPosition('img'+i, getPosition('img'+i, 'l')+speed, 'l');
}else if(directions == '<'){
if(getPosition('img'+i, 'l') <= -(cutRightPosi)+tmp)setPosition('img'+i, tableWidth, 'l');
setPosition('img'+i, getPosition('img'+i, 'l')-speed, 'l');
}
}
}
}
// * À̹ÌÁö À§Ä¡ ¼³Á¤
function initPosition(){
for(var i=1 ; i<=nums ;i++){
setPosition('img'+i, (i-1)*imgWidth , 'l');
}
}
// * ½ºÅ©·Ñ ¹æÇ⠹ٲٱâ
function dirChange(){
if(directions == '>')directions = '<';
else if(directions == '<')directions = '>';
}
initPosition();
setInterval("moves()", 10);
//-->
</script>
|