이미지 슬라이드

인터넷관련 2008. 2. 2. 09:35
<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) 2008.02.02
이미지 갤러리 만들기 <2>  (0) 2008.02.02
이미지 갤러리 만들기 <1> - 작은 그림을 클릭해보면 왼쪽으로 원본 이미지가 뜬다.  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
이미지 슬라이드  (0) 2008.02.02
은은하게 변하는 롤오버 이미지  (0) 2008.02.02
같은 글자 반복해서 나타내기  (1) 2008.02.01
마우스 오버시 툴팁 - 풍선 도움말  (0) 2008.02.01
,

티스토리툴바