[ jQuery ] 슬라이드 - fadeToggle로 자동재생 / 일시정지 로직 구현

일정한 간격을 두고 두개의 이미지를 번갈아 나타내는 자동재생 기능과 일시정지 버튼,
그리고 타이틀을 누르면 일시정지되며 이미지가 전환되는 로직을 구현해보자😎

HTML

       <section class="story">
           <ul class="story-container">
                <li>
                    <!-- sr-only는 reset에서 안보이게 처리됨 -->
                    <h2 class="sr-only">삼표인 이야기</h2>
                    <a href="#" class="go-story">면접관 이야기 바로가기</a>
                    <p>
                        삼표의 이름을 걸고 신기술을 만들어냅니다.
                        <br>   
                        여러분도 삼표인이 되어 다양한 기회를 누려보시길 바랍니다!
                    </p>
                    <a href="#" class="view">view</a>
                </li>
                <li>
                    <h2 class="sr-only">면접관 이야기</h2>
                    <a href="#" class="go-story">삼표인 이야기 바로가기</a>
                    <p>
                        한결같은 열정으로 꿈을 이룹니다. 삼표인이 되고자 하시는       
                        <br>   
                        분들에게 당부하고 싶은 이야기를 전해 드립니다 .                    
                    </p>
                    <a href="#" class="view">view</a>
                </li>
           </ul>

           <!-- on이 붙으면 불투명도 처리 되도록-->
           <a href="#" class="story-play on">자동재생</a>
           <a href="#" class="story-pause">일시정지</a>
       </section>

css

<style>
    .story {
      position: relative;
      width: 620px;
      height: 255px;
      margin: 0 auto;
      border: 1px solid #000;
    }

    .story > .story-container {
      width: 100%;
      height: 100%;
    }

    .story > .story-container > li {
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .story > .story-container > li:nth-child(1) {
      display: block;
      background-image: url(./../images/mid_scnd_slides1.jpg);
    }

    .story > .story-container > li:nth-child(1) > a:nth-of-type(1) {
      display: block;
      position: absolute;
      left: 0;
      top: 72px;
      width: 180px;
      height: 68px;
      text-indent: -9999px;
    }

    .story > .story-container > li:nth-child(2) {
      background-image: url(./../images/mid_scnd_slides2.jpg);
    }

    .story > .story-container > li:nth-child(2) > a:nth-of-type(1) {
      display: block;
      position: absolute;
      left: 0;
      top: 0px;
      width: 180px;
      height: 68px;
      text-indent: -9999px;
    }

    .story > .story-container > li > p {
      position: absolute;
      left: 30px;
      top: 170px;
      line-height: 1.6;
    }

    .story > .story-container > li > .view {
      display: block;
      position: absolute;
      left: 30px;
      bottom: 20px;
      width: 37px;
      height: 9px;
      text-indent: -9999px;
      background-image: url(./../images/view.png);
    }

    .story > a {
      display: block;
      position: absolute;
      top: 20px;
      width: 12px;
      height: 12px;
      text-indent: -9999px;
    }

    .story > a:nth-of-type(1) {
      right: 50px;
      background-image: url(./../images/story_play.png);
    }

    .story > a:nth-of-type(2) {
      right: 30px;
      background-image: url(./../images/story_pause.png);
    }

    .story > a.on {
      opacity: 0.5;
    }

</style>

JavaScript / jQuery

<script>
$(function(){

    const $goStory = $('.go-story');
    const $slides = $('.story li');
    const $btnPlay = $('.story-play');
    const $btnPause = $('.story-pause');

    let intervalKey = null;


    //자동재생 함수선언
    function autoPlay(){
        intervalKey = setInterval(function(){
            $slides.fadeToggle(1000);
        },2000);
    }

    //일시정지 함수선언
    function autoPause(){
        clearInterval(intervalKey);
        $btnPause.addClass('on').prev().removeClass('on');
    }


    //클릭 이벤트 
    $goStory.on('click',function(evt){
        evt.preventDefault(); //a링크로 안넘어가고 함수실행

        autoPause(); //자동재생 중 슬라이드 눌렀을 때 일시정지 버튼 불투명도 처리되도록
        $slides.fadeToggle(1000);
    });
    

    //플레이 버튼 
    $btnPlay.on('click',function(evt){
        evt.preventDefault();

        $(this).addClass('on').next().removeClass('on');
        autoPlay();
    });

    //일시정지 이벤트 
    $btnPause.on('click',function(evt){
        evt.preventDefault();

        autoPause();
    });
    

    //페이지 로드시 자동재생 
    $(window).on('load',function(){
        autoPlay();
    });
    
});
</script>

• 삼표그룹 홈페이지의 일부를 발췌하였습니다.