자동으로 전환되는 탭 + 탭 클릭시 변경되는 이미지, 문구, a태그

클라이언트 요청사항
좌측의 탭을 누르면 우측 이미지, 하단 문구, 버튼 링크가 변경되게 해주세요.

 

 

✅ 구현 화면

 

✔️ 좌측 탭을 누르면 우측 이미지 / 하단 문구 / 버튼 링크가 변경된다.

✔️ 7초마다 다음 탭이 active된다.

✔️ 사용자가 탭을 누르면, 자동으로 전환되던 건 멈춘다.

 

 

✅ 코드

  <div class="product-container">
      <div class="content">
        <div class="content-inner">
          <div class="left">
            <ul class="morenvy-banner-area" area_id="aeae">
              <li class="layer morenvy-banner">
                <div class="layer-inner">
                  <span class="layer-title">{#title}</span>
                  <span class="layer-description"
                    >{#text_1}<a href="{#link_1}"><!--@import(/svg/right_bottom_arrow.svg)--></a>
                  </span>
                </div>
                {#imgTag_1}

                <div class="footer-text-data displaynone">{#html}</div>
                <div class="link-data displaynone">{#link_1}</div>
              </li>

              <li class="layer morenvy-banner">
                <div class="layer-inner">
                  <span class="layer-title">{#title}</span>
                  <span class="layer-description"
                    >{#text_1}<a href="{#link_1}"><!--@import(/svg/right_bottom_arrow.svg)--></a>
                  </span>
                </div>
                {#imgTag_1}

                <div class="footer-text-data displaynone">{#html}</div>
                <div class="link-data displaynone">{#link_1}</div>
              </li>
            </ul>
          </div>

          <div class="right">
            <img id="product-image" src="" alt="" />
          </div>
        </div>
        <div id="footer-text" class="">
          <div class="text"></div>
          <div class="btn"><a class="view-boxbutton__black outline" href=""></a></div>
        </div>
      </div>
    </div>
      <script>
    function setFooterWidth() {
      // .left 요소의 너비 가져오기
      var leftElement = document.querySelector("#forulayers .left");
      var footerTextElement = document.querySelector("#forulayers #footer-text");

      if (leftElement && footerTextElement) {
        // .left 요소의 패딩을 제외한 순수 content width 구하기
        var contentWidth = leftElement.clientWidth;
        footerTextElement.style.width = contentWidth + "px";
      }
    }
    document.addEventListener("DOMContentLoaded", function () {
      setTimeout(function () {
        const layers = document.querySelectorAll(".layer");
        const footer = document.getElementById("footer-text");
        const image = document.getElementById("product-image");
        let currentIndex = 0;
        let intervalId;
        let isAutoRotating = true;

        // 이미지 미리 로드 함수
        function preloadImages() {
          layers.forEach((layer) => {
            const imgElement = layer.querySelector("img");
            if (imgElement) {
              const img = new Image();
              img.src = imgElement.src;
            }
          });
        }

        function updateContent(layer) {
          const decElement = layer.querySelector(".footer-text-data");
          const linkElement = layer.querySelector(".link-data");
          const imgElement = layer.querySelector("img");

          if (decElement) {
            footer.querySelector(".text").innerHTML = decElement.innerHTML;
          }
          if (linkElement) {
            footer.querySelector(".view-boxbutton__black").setAttribute("href", linkElement.innerHTML.trim());
          }
          if (imgElement) {
            image.src = imgElement.src;
          }

          layers.forEach((l) => l.classList.remove("active"));
          layer.classList.add("active");
        }

        function rotateLayer() {
          if (!isAutoRotating) return;
          currentIndex = (currentIndex + 1) % layers.length;
          updateContent(layers[currentIndex]);
        }

        function startAutoRotation() {
          isAutoRotating = true;
          intervalId = setInterval(rotateLayer, 4000);
        }

        function stopAutoRotation() {
          isAutoRotating = false;
          clearInterval(intervalId);
        }

        // 초기 컨텐츠 설정
        updateContent(layers[currentIndex]);

        // 이미지 미리 로드
        preloadImages();

        // 4초마다 레이어 변경 시작
        startAutoRotation();

        // 클릭 이벤트 리스너 추가
        layers.forEach((layer, index) => {
          layer.addEventListener("click", function () {
            stopAutoRotation();
            currentIndex = index;
            updateContent(this);
          });
        });

        setFooterWidth();
      }, 1000);
    });

    // 화면 사이즈 변경 시 실행
    window.addEventListener("resize", setFooterWidth);
  </script>