슬라이드 쇼
사진이나 그림등이 정해진 순서에 따라 마치 슬라이드 쇼를 하는 것처럼 나타났다 사라졌다 하는
스크립트입니다. 이 스크립트 또한 그리 길지도 않으면서 훌륭한 효과를 보여주는데요,
소스(1) <script language="JavaScript">
function reapply(){
setTimeout("slideit()",2000)
return true
}
window.onerror=reapply
</script>
<script language="JavaScript">
<!--
var image1=new Image()
image1.src="../image/0.jpg"
var image2=new Image()
image2.src="../image/6.jpg"
var image3=new Image()
image3.src="../image/2.jpg"
var image4=new Image()
image4.src="../image/1.jpg"
//-->
</script>
일단 위의 소스(1)을 <head>테그 안에 복사해 둡니다.
붉은 색은 순차적으로 보여질 사진들이고 더 추가를 원하시면 image5.src,image6.src....등으로
추가 하시면 됩니다.
소스(2) <p align="center"><a href="javascript:slidelink()" onmouseover="window.status='Click on the image to learn more about it!';return true"
onmouseout="window.status=''"><img src="../image/1.jpg" border="0" style="filter:blendTrans(duration=3)"
name="slide"> </a><a href="javascript:slidelink()" onmouseover="window.status='Click on the image to learn more about it!';return true"
onmouseout="window.status=''"><script language="JavaScript">
<!--
var number_of_images=4
var speed=1
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.blendTrans.apply()
document.images.slide.src=eval("image"+step+".src")
if (document.all)
slide.filters.blendTrans.play()
whichimage=step
if (step<number_of_images)
step++
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000+3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
window.location="java37.html"
else if (whichimage==2)
window.location="java37.html"
else if (whichimage==3)
window.location="java37.html"
else if (whichimage==4)
window.location="java37.html"
}
//-->
</script>
위의 소스(2)중 파란 색은 최초에 보여지는 사진을 나타내는 것이며 분홍 색중 number_of_images=4 은 보여질 사진의
총 개수를 나타냅니다. 총 개수는 최초의(위의 파란 색)사진은 포함되지 않습니다.
speed=1은 장당 사진이 머무는 시간을 나타내며 "1"은 1초를 의미합니다.
맨 아래쪽의 붉은 글씨는 각각의 사진을 클릭했을 때 나타나는 url을 표시 한 것입니다.
링크를 원하지 않으신다면 이 자리에 "#"표시를 하시면 됩니다.
어때요?
좀 복잡하긴 하지만 적용이 그리 어려운 건 아니죠?
유용하게 사용하시길 바랍니다.