이전에 이미지 전환 기능을 구현한 적이 있었는데, 이번에는 자동 재생을 위해 타이머를 추가해보았습니다. 코드를 살펴보겠습니다.

CSS 코드:

<style>
    ul { padding:0; margin:0; }
    li { list-style:none; }
    .container { width:400px; height:500px; position:relative;
        float: left;margin-right:60px; background:url(img/loader_ico.gif) no-repeat center #fff; }
    .container img { width:400px; height:500px; }
    .container ul { width:40px; position:absolute; top:0; right:-50px; }
    .container li { width:40px; height:40px; margin-bottom:4px; background:#666; }
    .container .active { background:#FC3; }
    .container span { top:0; }
    .container p { bottom:0; margin:0; }
    .container p,.container span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>

HTML 코드:

 <div class="container" id="imageSlider">
        ![]()
        <span>로딩 중...</span>
        <p>설명 텍스트 로딩 중...</p>
        
  </div>

이제 JavaScript 코드입니다:

window.onload = function() {
            var container = document.getElementById("imageSlider");
            var imageElement = container.getElementsByTagName("img")[0];
            var indicatorList = container.getElementsByTagName("ul")[0];
            var listItemElements = indicatorList.getElementsByTagName("li");
            var loadingSpan = container.getElementsByTagName("span")[0];
            var descriptionParagraph = container.getElementsByTagName("p")[0];
            var imageUrlArray = ["img/pic1.jpg", "img/pic2.jpg", "img/pic3.jpg", "img/pic4.jpg"];
            var descriptionArray = ["이미지 1", "이미지 2", "이미지 3", "이미지 4"];
            var currentIndex = 0;
            
            // ul에 li 요소 추가, 배열 길이만큼 생성
            for (var i = 0; i < imageUrlArray.length; i++) {
                indicatorList.innerHTML += "<li></li>";
            }

            <strong>// 타이머 설정
            var autoTimer = null;
            function startAutoPlay(){
                autoTimer = setInterval(function(){
                    currentIndex++;
                    currentIndex %= imageUrlArray.length;
                    updateDisplay();
                },1000);
            }
            startAutoPlay();

            container.onmouseover = function(){
                clearInterval(autoTimer);
            };
            container.onmouseout = startAutoPlay;</strong>// 주의: 이벤트 핸들러 호출 시 괄호를 사용하지 않아야 합니다. 함수 이름 뒤에 괄호를 붙이면 함수 실행 결과가 반환되며, 반환값이 없으면 undefined가 됩니다.

            // 초기화 함수
            function updateDisplay() {
                imageElement.src = imageUrlArray[currentIndex];
                descriptionParagraph.innerHTML = descriptionArray[currentIndex];
                loadingSpan.innerHTML = (currentIndex + 1) + "/" + imageUrlArray.length;
                for (var i = 0; i < listItemElements.length; i++) {
                    listItemElements[i].className = "";
                }
                listItemElements[currentIndex].className = "active";
            }
            updateDisplay();

            for (var i = 0; i < listItemElements.length; i++) {
                listItemElements[i].index = i;
                listItemElements[i].onclick = function () {
                    currentIndex = this.index;
                    updateDisplay();
                }
            }
    }

타이머 관련 코드는 볼드체로 표시했습니다. 특히 주의해야 할 점은 주석에 설명된 것처럼 이벤트 핸들러에 괄호를 붙이지 말아야 한다는 것입니다. 함수 이름에 괄호를 붙이면 해당 함수의 반환값이 되며, 반환값이 없는 경우 undefined가 됩니다.

오늘은 여기까지입니다. 피드백 환영합니다!