전후진 갤러리(9장) + 사운드 + 파티클 + 효과음 > 팁

• 목록

<script>
image_1 = "https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg";
image_2 = "https://blog.kakaocdn.net/dn/1i2I1/btq8bsVCBHv/WccnmtYuL4C4KjEdqSCenK/img.jpg";
image_3 = "https://blog.kakaocdn.net/dn/xBQjY/btq8aOLB6zE/kvl0wXU5HGOa5wRj943fck/img.jpg";
image_4 = "https://blog.kakaocdn.net/dn/qyzaz/btq8bMl03Lh/zqchlJvs17HYcflcKJsJF1/img.jpg";
image_5 = "https://blog.kakaocdn.net/dn/qTFDC/btq8at8K8pH/yxX7giOadkys9yhlH3ssKk/img.jpg";
image_6 = "https://blog.kakaocdn.net/dn/ba1PN1/btq79NzZi9L/xRllNJgag5mwfeKrhdw2AK/img.jpg";
image_7 = "https://blog.kakaocdn.net/dn/3J3Ch/btq79MntdX8/mg1zUkOWgplDDKIg5KXUUk/img.jpg";
image_8 = "https://blog.kakaocdn.net/dn/bnCInn/btq799JxU9n/0IdjW0Y9gG78W577ey0eBK/img.jpg";
image_9 = "https://blog.kakaocdn.net/dn/KRlrB/btq8aNzdErU/CB8kbDIfKmehHHAKEc59J0/img.jpg";
imgNumber = autoCount = 1;
function fadeGallery() {
galleryImage.style.opacity = 1;
galleryImage.style.backgroundImage = galleryDiv.style.backgroundImage;
imgNumber = arguments[0];
galleryDiv.style.backgroundImage = "url(" + this['image_' + imgNumber] + ")";
fadeMode();
autoCount = 0;
mp3Effect.play();
}
function fadeMode() {
if (galleryImage.style.opacity <= 0) clearInterval(setInterval(fadeStop));
else galleryImage.style.opacity = galleryImage.style.opacity - 0.01;
}
fadeStop = setInterval(fadeMode, 10);
for (imageTotal = 0; this["image_" + (imageTotal + 1)]; imageTotal++);
function galleryGo() {
if (arguments[0] == 'next') fadeGallery(imgNumber == imageTotal ? 1 : imgNumber + 1);
else if (arguments[0] == 'prev') fadeGallery(imgNumber == 1 ? imageTotal : imgNumber - 1);
else fadeGallery(arguments[0]);
}
function audioPlay() {
mp3Player.play();
playBtn.style.display = 'none';
pauseBtn.style.display = 'block';
effectMp4.play();
}
function audioPause() {
mp3Player.pause();
playBtn.style.display = 'block';
pauseBtn.style.display = 'none';
effectMp4.pause();
}
function autoMode() {
autoCount += 1;
if (autoCount == 5) {
galleryGo("next");
mp3Effect.pause();
autoCount = 0;
}
}
autoSec = setInterval(autoMode, 1000);
</script>
<div style=width:100%>
<div id=galleryDiv style=position:relative;background-image:url(https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg);background-size:contain;border-radius:20px>
<div id=galleryImage style=height:100%;opacity:1;background-image:url(https://blog.kakaocdn.net/dn/csRR08/btq799CI5aa/PtkHLaFABEh5GUk7Zdp8OK/img.jpg);background-size:contain;border-radius:20px></div>
<video id=effectMp4 style=position:absolute;top:0px;left:0px;width:100%;mix-blend-mode:screen;border-radius:20px src=https://blog.kakaocdn.net/dn/chJ8wO/btq8bsuCKPi/9ytHFYHtWa14c861PuCct1/tfile.mp4 autoplay loop muted></video>
<table style=position:absolute;top:0px;left:0px;width:100%;height:100% cellpadding=30 cellspacing=0 onmouseover=style.opacity='1' onmouseout=style.opacity='0'>
<td align=left><img style=cursor:pointer src=https://blog.kakaocdn.net/dn/I1GYB/btq8bL8uxVv/guiZYpTMedre9zj97Y1jk0/img.png onclick=galleryGo("prev")></td>
<td align=center><img id=playBtn style=display:block;opacity:0.5;cursor:pointer src=https://blog.kakaocdn.net/dn/b5BYwO/btq8bsH5Ogy/kkmxKysGs7YXNPtWHKCJoK/img.png onclick=audioPlay()><img id=pauseBtn style=display:none;opacity:0.5;cursor:pointer src=https://blog.kakaocdn.net/dn/b75KEC/btq8a6L15B6/NS06gThLBHCRuRHOZyef5k/img.png onclick=audioPause()></td>
<td align=right><img style=cursor:pointer src=https://blog.kakaocdn.net/dn/bniCh0/btq8bsg19MB/PJUsaJdJkpJdbkHcWUC9wk/img.png onclick=galleryGo("next")></td>
</table>
</div>
</div>
<script>galleryDiv.style.height = galleryDiv.clientWidth * 9 / 16 + 'px'</script>
<audio id=mp3Player src=https://blog.kakaocdn.net/dn/dQXro5/btq8bNSPslc/MObPmCjACo5oDD6T1cbfZ1/tfile.mp3 loop></audio>
<audio id=mp3Effect src=https://blog.kakaocdn.net/dn/0amKr/btq79uHsI9J/sorVaDmKDqN1bafF1GAuJ1/tfile.mp3></audio>