묻고답하기

본문소스를 올립니다.

슬라이더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 남기남
수딘이짱ㅋ 직원  
하나보드 회원정보 살펴 봐 주세요. file  
bestpage door web 서브페이지 적용 재질문 [2] file 2017.08.19 by bestpage
누리는사람 처음게시물이 열린상태로 게시판이 열리도록...[도와주세요] [2] 2017.08.18 by 누리는사람
사르나트 상단 head 를 본문 너비와 같이 조절해서 좌우를 잘라내는 것은 어떻게 하나요? [4] 2017.08.18 by 사르나트
청주native 익명 닉네임 색상 변경하기 도와주세요 ㅠㅠ [4] 2017.08.18 by DoorWeb
kim2**** XE사이트 관리자페이지로 이동이 안됩니다.  
xe사용자권한 모바일화면에서 pc게시판 내용물 불러오는방법 어떻게 하나요 ㅠㅠ [1] 2017.08.18 by 우주학개론
랍스타 오토셋에서 카페24로 이전 문의입니다. [2] 2017.08.17 by 랍스타
bestpage door web 서브페이지 적용이 잘 안돼요 (스샷 첨부) [1] file 2017.08.17 by DoorWeb
노도아 사이트맵이 추가가 안됩니다ㅠㅠ 이미지 등록도 안돼요~ [1] 2017.08.17 by HowtoXE
호롤루리라리 게시판 권한 설정 [1] 2017.08.17 by HowtoXE
김병욱 위키의 마이그레이션 관련 질문입니다. [1] 2017.08.17 by HowtoXE
xe사용자권한 모바일화면에서 pc게시판 내용물 불러오는방법! [4] file 2017.08.17 by GG
마꼬꼬 MYSQLTUNER에서 알려주는 값이 제 서버의 최적값인가요? [1] 2017.08.17 by 디트리히A
꿈의결정 https에서 http로 바꾸는 방법 아시나요? [1] 2017.08.17 by 디트리히A
소보로빵 이니시스 서버 이전때문에 누리고 모듈을 수정해야할까요? [1] file 2017.08.17 by 디트리히A
sd**** 게시판에 글쓰면,메일전송되는데,서버에 요청중이 오래 떠요 [4] 2017.08.17 by GG
꽁꽁 회원가입 메일 인증(진정한 고수분의 친절한 답변 ...) [1] file 2017.08.17 by GG
오오이잉 아이폰에서 글/댓글 작성 안되는 문제..  
sundriespds 모듈 업데이트 오류 질문 [2] 2017.08.16 by framei
튜닝셀프 혹시 이런 증상 겪어보신 분 계신가요? file  
보리 파일 업로드 중 에러가 발생하였습니다. [1] 2017.08.16 by sejin7940
thorn 레이아웃 개발 [1] 2017.08.16 by DoorWeb
clztogod 가장 최근 게시물이 열린 상태로 게시판 열기. [2] 2017.08.16 by 행복누림
The폰드림 메인창에 위젯만 달면 로그인창이 뜨네요  
thorn ftp 레이아웃 업로드했는데 추가가 안돼요 [3] file 2017.08.16 by thorn
오사카 윅스게시판질문입니다. 급해요 ㅜㅜ [2] 2017.08.16 by 카인
고구마쨩 XE 게시글 저장 폴더 질문.. [2] file 2017.08.16 by 제이와이엔소프트
죽방망이 공부하고 있는학생입니다 $m_srl은 게시판인데 [1] 2017.08.16 by 제이와이엔소프트