<body>
<script language = "JavaScript">
<!--
// 이미지의 위치
var imgPosX = 10;
var imgPosY = 10;
// 시간 간격 (멈춰있는 초)
var pause = 3;
// 오버랩 빠르기 (클수록 빠름 - 100을 나누어 떨어질 수 있는 수가 좋음)
var multi = 4;
// 이미지 주소 (imgName1과 imgName2를 교대로 하고, 배열 첨자는 두번씩 씀)
var imgName1 = new Array();
var imgName2 = new Array();
imgName1[0] = "images/1.jpg";
imgName2[0] = "images/2.jpg";
imgName1[1] = "images/3.jpg";
imgName2[1] = "images/4.jpg";
imgName1[2] = "images/5.jpg";
imgName2[2] = "images/6.jpg";
imgName1[3] = "images/7.jpg";
imgName2[3] = "images/8.jpg"; // 홀수 개일 경우 마지막 그림을 빈 그림으로 해서 짝수개로 맞춰주세요.
var imgPreload1 = new Array();
for (i = 0; i < imgName1.length; i++) {
imgPreload1[i] = new Image();
imgPreload1[i].src = imgName1[i];
}
var imgPreload2 = new Array();
for (i = 0; i < imgName2.length; i++) {
imgPreload2[i] = new Image();
imgPreload2[i].src = imgName2[i];
}
var imgIndex1 = 0;
var imgIndex2 = imgName2.length - 1;
var step = 0;
var maxStep = 100 / multi;
function overlapStart()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
var timer = setTimeout("overlapStart()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function overlap1to2()
{
if (step-- >= 0) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap1to2()", 0);
}
else {
clearTimeout(timer);
changeImage1();
var timer = setTimeout("overlap2to1()", pause);
}
}
function overlap2to1()
{
if (step++ < maxStep) {
overlap1.filters.alpha.opacity = step * multi;
overlap2.filters.alpha.opacity = (maxStep - step) * multi;
var timer = setTimeout("overlap2to1()", 0);
}
else {
clearTimeout(timer);
changeImage2();
var timer = setTimeout("overlap1to2()", pause);
}
}
function changeImage1()
{
imgIndex1++;
if (imgIndex1 >= imgName1.length) {
imgIndex1 = 0;
}
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
}
function changeImage2()
{
imgIndex2++;
if (imgIndex2 >= imgName2.length) {
imgIndex2 = 0;
}
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
}
function overlapImage()
{
pause = pause * 1000;
overlap1.style.posLeft = overlap2.style.posLeft = imgPosX;
overlap1.style.posTop = overlap2.style.posTop = imgPosY;
overlap1.innerHTML = "<img src='" + imgName1[imgIndex1] + "' border='0'>";
overlap2.innerHTML = "<img src='" + imgName2[imgIndex2] + "' border='0'>";
overlapStart();
}
document.write('<div id="overlap1" style="position:absolute; filter:alpha(opacity=0);"></div>');
document.write('<div id="overlap2" style="position:absolute; filter:alpha(opacity=0);"></div>');
window.onload = overlapImage;
-->
</script>
</body>
