묻고답하기

본문소스를 올립니다.

슬라이더3에서 1로 돌아갈때 pre/next 함수를 만들어 자연스럽게 보이게 하고 싶은데 잘 안되네요

고수님들 도움주시면 감사하겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {margin:0;padding:0;}
#wrap {
  width:100%;
  height:600px;
  position: relative;
}
  .wrap_abs_slider {
    width:100%;
    position: absolute;
    left:0;
    top:100px;
    height:500px;
    z-index: 0;

  }
  .wrap_sl_rel {
    width:100%;
    height:100%;
    position: relative;
    overflow: hidden;
  }
  .wrap_sl_rel>img {
    position: absolute;
    top:0;
    width:100%;
    height:500px;
  }
    .sl_img01 {
      left:0%;
      z-index: 3;
    }
    .sl_img02 {
      left:100%;
      z-index: 2;
    }
    .sl_img03 {
      left:200%;
      z-index: 1;
    }
.wrap_abs_con {
  position:absolute;
  width:1000px;
  left:50%;
  margin-left:-500px;
  top:100px;
  z-index: 1;
  height:500px;
}

.wrap_con_rel {
  position: relative;
  width:100%;
  height:100%;

}
.wrap_con_rel>button {
  position: absolute;
  top:50%;
  margin-top:-15px;
  height:30px;
  width:100px;
  border:0;
  background-color:#ff0000;
  color:#fff;
}
.left {
  left:0;

}
.right{
  right:0;
}
.s_btn {
  position: absolute;
  left:50%;
  margin-left: -75px;
  width:150px;
  height:30px;
  list-style-type: none;
  bottom:10px;
  overflow: hidden;
}
.s_btn>li {
  float: left;
}
.s_btn>li>a {
  display: block;
  width:30px;
  height:30px;
  margin-right:20px;
  background-color: gray;
  border-radius:15px;
}
.s_btn>li:nth-child(3)>a {
  margin-right: 0;
}
.s_btn>li>a:hover {

  background-color: #f00;
}

</style>
  </head>
  <body>
    <script type="text/javascript">
    $(function(){

      var w01 = 0;
      var w02 = 0;
      var w03 = 0;


      sl01 ();
      setInterval(right_Click,3000);

        $('.right').click(function(){

          if(w01 == 1){
             sl02();
          }
          else if(w02 == 1) {
            sl03();
          }
          else if(w03 == 1){
            sl_Next();
          }
        });


        $('.left').click(function(){

          if(w01 == 1){
             sl_Pre();
          }
          else if(w02 == 1) {
            sl01();
          }
          else if(w03 == 1){
            sl02();
          }
        });

        function right_Click() {
          $('.right').trigger('click');

        }

        function sl_Pre() {
          w01 = 0;
          w02 = 0;
          w03 = 1;
          $('.sl_img01').animate({left:'-100%'},1000);
          $('.sl_img02').animate({left:'-200%'},1000);
          $('.sl_img03').animate({left:'0%'},1000);
          $('.sl_img01').animate({left:'100%'},1000);


          sbtn_03();

        }

        function sl_Next() {

          w01 = 1;
          w02 = 0;
          w03 = 0;

          $('.sl_img03').animate({left:'-100%'},1000);
          $('.sl_img01').animate({left:'0%'},1000);
          $('.sl_img02').animate({left:'100%'},1000);
          $('.sl_img03').animate({left:'200%'},1000);

          sbtn_01();

        }

      function sl01 (){
        w01 = 1;
        w02 = 0;
        w03 = 0;

        $('.sl_img01').animate({left:'0%'},1000);
        $('.sl_img02').animate({left:'100%'},1000);
        $('.sl_img03').animate({left:'200%'},1000);

     sbtn_01();
      }


      function sl02 (){
        w01 = 0;
        w02 = 1;
        w03 = 0;
        $('.sl_img01').animate({left:'-100%'},1000);
        $('.sl_img02').animate({left:'0%'},1000);
        $('.sl_img03').animate({left:'100%'},1000);

        sbtn_02();


      }


      function sl03 (){
        w01 = 0;
        w02 = 0;
        w03 = 1;

        $('.sl_img01').animate({left:'-200%'},1000);
        $('.sl_img02').animate({left:'-100%'},1000);

        $('.sl_img03').animate({left:'0%'},1000);


        sbtn_03();


      }


      function sbtn_01() {
        $('.s_btn>li:nth-child(1)>a').css('background','#c00');
        $('.s_btn>li:nth-child(2)>a').css('background','#999');
        $('.s_btn>li:nth-child(3)>a').css('background','#999');


      }
      function sbtn_02() {
        $('.s_btn>li:nth-child(1)>a').css('background','#999');
        $('.s_btn>li:nth-child(2)>a').css('background','#c00');
        $('.s_btn>li:nth-child(3)>a').css('background','#999');

      }
      function sbtn_03(){
        $('.s_btn>li:nth-child(1)>a').css('background','#999');
        $('.s_btn>li:nth-child(2)>a').css('background','#999');
        $('.s_btn>li:nth-child(3)>a').css('background','#c00');


      }

    });

    </script>
    <div id="wrap">
      <div class="wrap_abs_slider">
        <div class="wrap_sl_rel">
          <img class="sl_img01" src="img/1.jpg" alt="">
          <img class="sl_img02" src="img/2.jpg" alt="">
          <img class="sl_img03" src="img/3.jpg" alt="">
        </div>
      </div>

      <div class="wrap_abs_con">
        <div class="wrap_con_rel">
          <button class="left">left</button>
          <button class="right">right</button>
          <ul class="s_btn">
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

태그 연관 글
  1. [2016/11/01] 묻고답하기 wrap으로 감싼 부분이 height 100퍼센트가 원래 안되나요...? by Megg *4
  2. [2016/04/15] 묻고답하기 네비게이션바 관련 코딩 도움 부탁드립니다 by 범고래즈
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
파란촌놈 colorCode 모바일 레이아웃 질문 [4] 2017.07.01 by 파란촌놈
잠실베어스 유튜브 등 SNS 주소만 입력하면 아래 자동으로 출력시키고 싶습니다. [3] 2017.07.01 by thdwjdtjr
친절한상담원 닷홈 게시판에 스팸글 지우려는데 xe관리자 페이지 찾는 방법 [1] 2017.07.01 by sejin7940
orangetree89 제목이 없는 페이지가 59%?  
코딩펀 댓글을 스큰 형태로 가져오는 방법을 찾고 있어요!  
다탱 메모장 스킨 모바일에선 엔터표시가 제대로 먹혀서 줄 바꾸기가 되는데 PC버전에선 그게 안돼요  
원이아빠 출석부모듈 시간조정 부분 php 가 어디인가요 ? [1] 2017.06.30 by HowtoXE
파란촌놈 악성 글이 너무 많이 올라와서... [1] file 2017.06.30 by HowtoXE
친절한상담원 xe게시판에 스팸글 지우는 방법을 좀 알려주세요. [1] file 2017.06.30 by HowtoXE
다탱 이거 도대체 왜이러는걸까요.. 방명록 스킨 댓글 수정 시 나타나는 창에 이상한 태그들이 자동으로 나타나요 file  
김병욱 위키의 마이그레이션이 가능한가요? [1] 2017.06.30 by HowtoXE
mkp9**** UI단을 부트스트랩으로 디자인 할 수 있는지 궁금합니다. [1] 2017.06.30 by HowtoXE
홍홍홍 홈페이지 외부 노출 관련 [1] 2017.06.30 by HowtoXE
친절한상담원 PHP5.5 게시판 스팸글 조치방법 [2] file 2017.06.30 by 친절한상담원
쪼꼬마니 업데이트 후 관리자 로그인이 안되요.. ㅠㅠ [1] file 2017.06.30 by Luatic™
튜닝셀프 로그인 에러가 뜹니다.  
꿈틀잉 사이트맵에서 게시판 링크 모듈이름이 갱신이 안됩니다.  
S#arp DoorWeb 레이아웃과 그외 질문 입니다. [1] file 2017.06.29 by S#arp
Miuna3 짧은주소 질문드립니다. [2] 2017.06.29 by 블루카이
보따리c28f1 스케치북 웹진형의 문의드립니다. file  
달리다굼 탭메뉴를 클릭하면 글자가 사라집니다. [2] 2017.06.29 by 달리다굼
Riri pdf를 새창열기 말고 다운로드되게 하고싶습니다. [1] file 2017.06.29 by sejin7940
zxt**** 스케치북 방명록에서 댓글 작성시 바로 확인하는법  
파란촌놈 게시판 스킨에 대한 질문입니다. [3] 2017.06.28 by 파란촌놈
KimTAJO nginx에서 access.log 살펴보신분 혹시 있으신가요?  
리즈러브 슬라이더 질문입니다.  
유주스토어2 스케치북 게시판의 목록화면에 글쓴이 부분의 영역을 늘리고 싶습니다. file  
운현 게시판 및 페이지 글쓰기/수정 오류 [1] file 2017.06.28 by sejin7940
koll**** 게시판 검색 내용(제목+내용, 내용)에 확장변수 추가 가능여부 문의 [1] 2017.06.28 by sejin7940
김남진 xe 경로지정 문의 [1] 2017.06.28 by sejin7940