20230519 미니프로젝트 발표(슬라이드 이미지와 자막)

프로젝트 발표 영상

.slideshow-image {
            border-radius: 3%;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .mySlides {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            pointer-events: none;
        }

        .mySlides.show {
            opacity: 1;
            pointer-events: auto;
        }

        .slideshow-container {
            position: relative;
            margin: 150px auto auto auto;
            width: 300px;
            height: 400px;
            overflow: hidden;
            box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.5);
        }

        .intro {
            color: white;
            overflow: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

<div>
        <div class="slideshow-container">
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 1"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 2"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 3"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 4"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 5"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 6"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 7"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 8"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 9"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 10"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 11"
                    class="slideshow-image">
            </div>
            <div class="mySlides fade slideshow-image">
                <img src="이미지 주소 12"
                    class="slideshow-image">
            </div>
        </div>
        <br>
        <div style="text-align:center">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
        <div class="intro" id="intro-text">
            <p id="changing-text">첫번째 자막.</p>
            <br>
            <br>
            <br>
        </div>
    </div>

    <script>
        var slideIndex = 0;
        showSlides();
        changeText();

        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.opacity = 0;
                slides[i].style.pointerEvents = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1
            }
            slides[slideIndex - 1].style.opacity = 1;
            slides[slideIndex - 1].style.pointerEvents = "auto";
            setTimeout(showSlides, 2000); // 2초마다 이미지 전환
        }

        function changeText() {
            var changingText = document.getElementById('changing-text');
            var texts = [
                '불꽃놀이 같이 짧은 순간을 촬영하는걸 좋아하고',
                '풍경 사진을 주로 찍습니다.',
                '가끔은 꽃이나 음식사진도 촬영해요, 잘 부탁드립니다 :)',
            ]; // 변경할 텍스트들

            var index = 0; // 텍스트 배열의 인덱스

            setInterval(function () {
                changingText.textContent = texts[index]; // 텍스트 변경

                index++; // 다음 텍스트로 인덱스 증가
                if (index >= texts.length) {
                    index = 0; // 인덱스가 배열 범위를 넘어갈 경우 처음으로 초기화
                }
            }, 6000); // 6초마다 실행
        }
        
    </script>