인터넷정보

이미지 슬라이드

알 수 없는 사용자 2007. 10. 18. 13:59
<html>
<head>
<style type="text/css">
<!--
.spanstyle {position:absolute;left:-5000px}
-->
</style>
<script language="JavaScript">
<!--

var imgwidth=242

var imgheight=297

var imgurl=new Array()
imgurl[0]="img/img1.gif"
imgurl[1]="img/img2.gif"
imgurl[2]="img/img3.gif"
imgurl[3]="img/img4.gif"

var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgurl[i]
}

var x_finalpos=250

var y_finalpos=50

var x_slices=7

var y_slices=10

var pause=1

var screenwidth=100
var screenheight=100

var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=20
var i_image=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0

function initiate() {
cliptop=0
clipbottom=height_slice
clipleft=0
clipright=width_slice
i_loop=0
spancounter=0
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_randompos=Math.ceil(screenwidth*Math.random())
y_randompos=Math.ceil(screenheight*Math.random())
thisspan.posLeft=x_randompos
thisspan.posTop=y_randompos
thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
}
explode_IE()
}

function changeimage() {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
thisspan.posLeft=-5000
thisspan.posTop=-5000
spancounter++
}
}
spancounter=0
if (i_image>imgurl.length-1) {i_image=0}
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisinnerspan=eval("span"+spancounter)
thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>"
spancounter++
}
}
i_image++
initiate()
}


function explode_IE() {
spancounter=0
if (i_loop<=max_loop-1) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
var thisspan=eval("document.all.span"+spancounter+".style")
x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)
y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)
thisspan.posLeft+=x_step[spancounter]
thisspan.posTop+=y_step[spancounter]
spancounter++
}
}
i_loop++
var timer=setTimeout("explode_IE()",pause)
}
else {
spancounter=0
clearTimeout(timer)
var timer=setTimeout("changeimage()",2000)
}
}

//-->
</script>

</head>
<body onLoad="changeimage();">

<script language="JavaScript">
<!--
if (document.all) {
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")
spancounter++
}
}
spancounter=0
}
//-->
</script>

</body></html>

- 설명 -

위의 소스보기에서 처럼 빨간색으로 된 부분을 넣고 초록색으로 된 부분을 수정한다.

var imgwidth=242

var imgheight=297

이미지의 가로 크가와 세로 크기이다

imgurl[0]="img/img1.gif"
imgurl[1]="img/img2.gif"
imgurl[2]="img/img3.gif"
imgurl[3]="img/img4.gif"

이미지 주소 여러장을 쓸려면 번호를 늘려가며 계속 추가해준다

var x_finalpos=250

var y_finalpos=50

그림이 보여질 곳의 X좌표, Y좌표 그림이 보여질 위치를 지정해 주는거다

var x_slices=7

var y_slices=10

그림이 잘려질 개수 여기서는 가로로 7개 세로로 10개가 잘려졌다

var pause=1

그림이 모이는 속도 숫자가 커질수록 느려진다

var screenwidth=100
var screenheight=100

그림이 모이는 소스가 적용되는 범위 조각난 그림이 여기서는 가로 100 세로 100 범위에서 출발하여 모이게 된다.
반응형

'인터넷정보' 카테고리의 다른 글

은은하게 변하는 롤오버 이미지  (0) 2007.10.18
이미지 갤러리 만들기 <2>  (0) 2007.10.18
이미지 갤러리 만들기 <2>  (0) 2007.10.18
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다.  (0) 2007.10.18
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다.  (0) 2007.10.18
이미지 슬라이드  (0) 2007.10.18
이미지 슬라이드  (0) 2007.10.18
이미지 슬라이드  (0) 2007.10.18
이미지 슬라이드  (0) 2007.10.18
이미지 슬라이드  (0) 2007.10.18

'인터넷정보'의 다른글

  • 현재글이미지 슬라이드

관련글

댓글

티스토리툴바