Collapsible > BASIC ORIGNAL

• 목록
• 답변

<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>

추천0