지정된 갯수의 이미지가 순서를 바꾸면서 페이딩되며 나타납니다
<html>
<head>
<title> 이미지 로테이션효과</title>
<!-- [1단계] 아래의 코드를 <head> 와 </head> 사이에 붙여 넣으세요 -->
<style type="text/css">
/*각 이미지들을 둘러싸고있는 span 태그의 스타일을 정의합니다*/
.seqslidestyle{
margin-right: 15px;
}
</style>
<!----------------- 여기까지 ----------------->
</head>
<body>
<!-- [2단계] 아래의 코드를 <body> 와 </body> 태그 사이에 붙여 넣으세요 -->
<script type="text/javascript">
var seqslides=new Array()
// 아래의 방법으로 이미지경로와 링크 URL 을 지정 해 주세요
seqslides[0]=["images/001.gif", "http://www.happycgi.com"]
seqslides[1]=["images/002.gif", "http://www.happycgi.com"]
seqslides[2]=["images/003.gif", "http://www.happycgi.com"]
seqslides[3]=["images/004.gif", "http://www.happycgi.com"]
seqslides[4]=["images/005.gif", "http://www.happycgi.com"]
// 이미지간 지연속도를 지정합니다
var slidedelay=2000
// 한꺼번에 보여줄 이미지의 갯수를 지정합니다 (위에서 지정한 전체 이미지 갯수보다는 적어야 겠죠):
var slidestoreveal=3
// 각 이미지 사이에 적용할 태그를 설정 하세요
var slideseparater="<br>"
// 각 이미지들의 링크 타겟을 설정 하세요
var optlinktarget="secwindow"
// 이미지들의 테두리를 설정 하세요
var imgborderwidth=0
// 이미지의 투명도를 걸정 합니다
// [초기투명도,최종투명도] 순으로 지정합니다
// 초기투명도는 0.1~0.9 까지 저징하고, 최종투명도는 1 입니다
var opacityvalues=[0.2,1]
function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
var curslide=1
var curimgindex=0
var isfirstcycle=1
if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}
function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slideindex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}
function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}
function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).innerHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}
if (document.getElementById)
setInterval("displayit()",slidedelay)
</script>
<!----------------- 여기까지 ----------------->
</body>
</html>
|
