[jQuery]スライド-KakaoTalk

46032 ワード
jquery テキストリンク
KakaoTalkスライドの前/次のボタン、ナビゲーション、自動再生機能を使用してみてください.
これは塾評価課で作成した機能で、後でよく使われるかもしれないので、以下のように記録しておきます:)

HTML

  • スライドコンテナの位置基準をどの親に設定するかを検討してください
    • <body>
  <div id="wrap">
    <h1 class="text-center">카카오 슬라이드</h1>
  
    <div id="slides">
      <a href="#" class="slides-previous">이전버튼</a>
      <a href="#" class="slides-next">다음버튼</a>
  
      <ul class="slides-nav">
        <li class="on"><a href="#">무료채팅</a></li>
        <li><a href="#">보이스톡&페이스톡</a></li>
        <li><a href="#">샵 검색</a></li>
        <li><a href="#">톡게시판</a></li>
        <li><a href="#">오픈채팅</a></li>
        <li><a href="#">채널 탭</a></li>
      </ul>

      <div class="slides-img">
        <ul class="slides-container">
          <li><a href="#">무료채팅</a></li>
          <li><a href="#">보이스톡&페이스톡</a></li>
          <li><a href="#">샵 검색</a></li>
          <li><a href="#">톡게시판</a></li>
          <li><a href="#">오픈채팅</a></li>
          <li><a href="#">채널 탭</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>

    CSS

  • [スライドコンテナ]親に準じてleft:0;に配置する必要があります.移動時に最初のスライドは移動しません.
  • top:0;値は、基準点の親がスライド画像のサイズとして指定されているので入れられます.
  • 最後までうろうろしていた部分は、jsが実現されるとナビゲーションのhoverが同時に実行できないことです.これにより、各スライドのサスペンション運転値がクラスonの場合も一緒に実行されるという問題が解決される.(クラスonをjsで現在クリックされているインデックスに移動)
    • <style>
    h1{
      color:rgb(117, 117, 117);
    }

    #slides{
      position: relative;
      margin: 0 auto;
      width: 700px;
      height: 528px;
    }

    /* 이전,다음버튼 */
    #slides>a{
      display: block;
      position: absolute;
      top: 280px;
      width: 44px;
      height: 44px;
      text-indent: -9999px;
    }

    #slides>a:nth-of-type(1){
      left: 0;
      background-image: url(./../images/img_talk_button.png);
      background-position: 0 0;
    }

    #slides>a:nth-of-type(1):hover{
      background-position: -70px 0;
    }

    #slides>a:nth-of-type(2){
      right: 0;
      background-image: url(./../images/img_talk_button.png);
      background-position: 0 -70px;
    }

    #slides>a:nth-of-type(2):hover{
      background-position: -70px -70px;
    }

    /* 슬라이드 네비게이션 */
    #slides>.slides-nav{
      display: flex;
      margin: 0 auto;
      width: 480px;
    }

    #slides>.slides-nav>li{
      width: 80px;
    }

    #slides>.slides-nav>li:nth-of-type(1){
      background-image: url(./../images/btn_talk.png);
      background-position: 0 0;
    }

    #slides>.slides-nav>li:nth-of-type(1).on,
    #slides>.slides-nav>li:nth-of-type(1):hover{background-position:0 -90px;}

    #slides>.slides-nav>li:nth-of-type(2){
      background-image: url(./../images/btn_talk.png);
      background-position: -80px 0;
    }

    #slides>.slides-nav>li:nth-of-type(2).on,
    #slides>.slides-nav>li:nth-of-type(2):hover{background-position:-80px -90px;}

    #slides>.slides-nav>li:nth-of-type(3){
      background-image: url(./../images/btn_talk.png);
      background-position: -160px 0;
    }

    #slides>.slides-nav>li:nth-of-type(3).on,
    #slides>.slides-nav>li:nth-of-type(3):hover{background-position:-160px -90px;}

    #slides>.slides-nav>li:nth-of-type(4){
      background-image: url(./../images/btn_talk.png);
      background-position: -240px 0;
    }

    #slides>.slides-nav>li:nth-of-type(4).on,
    #slides>.slides-nav>li:nth-of-type(4):hover{background-position:-240px -90px;}

    #slides>.slides-nav>li:nth-of-type(5){
      background-image: url(./../images/btn_talk.png);
      background-position: -320px 0;
    }

    #slides>.slides-nav>li:nth-of-type(5).on,
    #slides>.slides-nav>li:nth-of-type(5):hover{background-position:-320px -90px;}

    #slides>.slides-nav>li:nth-of-type(6){
      background-image: url(./../images/btn_talk.png);
      background-position: -400px 0;
    }

    #slides>.slides-nav>li:nth-of-type(6).on,
    #slides>.slides-nav>li:nth-of-type(6):hover{background-position:-400px -90px;}

    #slides>.slides-nav>li>a{
      display: block;
      height: 90px;
      text-indent: -9999px;
    }

    /* 슬라이드 컨테이너 */
    #slides>.slides-img{
      overflow: hidden;
      position: relative;
      margin: 30px auto;
      width: 478px;
      height: 438px;
    }

    /* left를 0을 주어야 js에서 컨테이너 이동할때 첫번째 슬라이드가 이동하지 않는다! */
    #slides>.slides-img>.slides-container{
      display: flex;
      position: absolute;
      left: 0;  
      top: 0;
      width: 2868px;
    }

    #slides>.slides-img>.slides-container>li{
      width: 478px;
    }

    #slides>.slides-img>.slides-container>li:nth-of-type(1){background-image: url(./../images/img_talk_cont1.png);}
    #slides>.slides-img>.slides-container>li:nth-of-type(2){background-image: url(./../images/img_talk_cont2.png);}
    #slides>.slides-img>.slides-container>li:nth-of-type(3){background-image: url(./../images/img_talk_cont3.png);}
    #slides>.slides-img>.slides-container>li:nth-of-type(4){background-image: url(./../images/img_talk_cont4.png);}
    #slides>.slides-img>.slides-container>li:nth-of-type(5){background-image: url(./../images/img_talk_cont5.png);}
    #slides>.slides-img>.slides-container>li:nth-of-type(6){background-image: url(./../images/img_talk_cont6.png);}

    #slides>.slides-img>.slides-container>li>a{
      display: block;
      height: 438px;
      text-indent: -9999px;
    }
</style>

    jQuery

  • コンテナ移動関数と自動実行関数を宣言し、それぞれ実行したいイベントを実現します.
  • 重複する右インデックスもnextIdx関数として宣言されます.
    • <script>
    $(function(){

      const $container = $('#slides>.slides-img>.slides-container');
      const $slidesNav = $('#slides>.slides-nav>li>a');
      const $btnPrev = $('#slides>a').eq(0);
      const $btnNext = $('#slides>a').eq(1);

      let nowIdx = 0;
      let intervalkey = '';


      // 함수선언
      function moveFn(){
        //활성화 
        $slidesNav.eq(nowIdx).parent().addClass('on').siblings().removeClass('on');

        //이동 
        $container.stop().animate({
          left : -478 * nowIdx
        },400,"easeInOutCubic");
      }


      // 오른쪽방향 인덱스 함수
      function nextIdx(){
        if(nowIdx<5){
          nowIdx++;
        }else{
          nowIdx=0;
        }
      }


      // 자동실행 함수
      function autoPlay(){
        intervalkey = setInterval(function(){
          nextIdx();
          moveFn();
        },3000);
      }


      // 이벤트 구문
      $slidesNav.on('click',function(evt){
        evt.preventDefault();

        nowIdx = $slidesNav.index(this);
        moveFn();
      });


      // 이전버튼
      $btnPrev.on('click',function(evt){
        evt.preventDefault();

        if(nowIdx>0){
          nowIdx--;
        }else{
          nowIdx=5;
        }

        moveFn();
      });


      // 다음버튼
      $btnNext.on('click',function(evt){
        evt.preventDefault();
        nextIdx();
        moveFn();
      });


      // 자동실행 
      $(window).on('load',function(){
        clearInterval();
        autoPlay();
      });
    });

</script>
    JDK1.5のスレッドプールの使用概要
    Knowledge Base--Handling Write Skew Anomaly処理書き込み偏差(123)