221122 banner_slider.html

Skills/JavaScript

221122 banner_slider.html

개발자 윤구나 2022. 11. 22. 10:57

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>banner_slider</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="./js/banner_slider.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }
      
      a {
        text-decoration: none;
      }

      .banner_box {
        width: 730px;
        position: relative;
        background-color: #d7d7d7;
      }

      .banner {
        padding: 8px 35px;
        border: 1px solid black;
      }

      .frame {
        width: 650px;
        height: 200px;
        margin-left: 6px;
        overflow: hidden;
        position: relative;
      }

      .frame ul {
        width: 900px;
        position: absolute;
        top: 0;
        left: 0;
      }

      .frame li {
        width: 200px;
        height: 200px;
        float: left;
        padding: 0 8px;
      }

      .ctr_btn {
        position: absolute;
        right: 10px;
        top: 5px;
      }

      .ctr_btn img {
        border: 1px solid black;
        box-sizing: border-box;
      }

      .left {
        position: absolute;
        top: 50%;
        left: 8px;
        margin-top: -15px;
      }

      .right {
        position: absolute;
        top: 50%;
        right: 8px;
        margin-top: -15px;
      }
    </style>
  </head>
  <body>
    <section class="banner_box">
      <div class="banner">
        <div class="frame">
          <ul>
            <li>
              <a href="http://www.naver.com"
                ><img src="./images/spring_01.jpg" alt="spring"
              /></a>
            </li>
            <li>
              <a href="http://www.naver.com"
                ><img src="./images/summer_01.jpg" alt="summer"
              /></a>
            </li>
            <li>
              <a href="http://www.naver.com"
                ><img src="./images/autumn_01.jpg" alt="autumn"
              /></a>
            </li>
            <li>
              <a href="http://www.naver.com"
                ><img src="./images/winter_01.jpg" alt="winter"
              /></a>
            </li>
          </ul>
        </div>
        <!--frame-->
      </div>
      <!--banner-->

      <div class="ctr_btn">
        <a href="#" class="play"
          ><img src="./images/play.jpg" alt="play_btn"
        /></a>
        <a href="#" class="stop"
          ><img src="./images/stop.jpg" alt="stop_btn"
        /></a>
      </div>

      <div class="btn">
        <a href="#" class="left"
          ><img src="./images/prev.jpg" alt="left_btn"
        /></a>
        <a href="#" class="right"
          ><img src="./images/next.jpg" alt="right_btn"
        /></a>
      </div>
    </section>
  </body>
</html>

$(function () {
  let eleWidth = $(".frame ul li").innerWidth(); // padding을 포함한 width
  let state = false; // li동작 상태를 관리하는 변수
  let playOn = false; // bannerslider의 동작 상태를 관리하는 변수
  let direction = "left";
  let bannerAuto; // setInterval()함수 제어를 위한 변수

  function play() {
    if (!playOn) {
      playOn = true;
      bannerAuto = setInterval(function () {
        if (direction == "left") {
          $(".left").click();
        } else {
          $(".right").click();
        }
      }, 2000);
    }

    if (playOn) {
      $(".frame li a").mouseover(function () {
        stop();
      });
    }
  }

  function stop() {
    if (playOn) {
      playOn = false;
      clearInterval(bannerAuto);
    }
    $(".frame li a").mouseout(function () {
      play();
    });
    $(".frame li a").click(function () {
      location.href;
    });
  }

  function left() {
    stop();
    direction = "left";
    $(".frame ul").animate({ left: eleWidth * -1 }, 500, function () {
      $(this).children("li:first").insertAfter($(this).children("li:last"));
      $(this).css("left", 0);
      state = false;
      play();
    });
  }

  function right() {
    stop();
    direction = "right"; // 아무 동작 하지 않는다. 그저 상태를 알려줄 뿐.
    $(".frame>ul>li:last").insertBefore($(".frame>ul>li:first"));
    $(".frame ul").css("left", eleWidth * -1);
    $(".frame ul").animate({ left: 0 }, 500, function () {
      state = false;
      play();
    });
  }

  $(".left").click(function () {
    if (!state) {
      state = true;
      left();
    }
  });

  $(".right").click(function () {
    if (!state) {
      state = true;
      right();
    }
  });

  $(".stop").click(function () {
    stop();
  });

  $(".play").click(function () {
    play();
  });

  $(".play").click();
});