스퐁지송 개발노트

자바스크립트(캐러셀) 본문

JAVA_Script

자바스크립트(캐러셀)

강준석 2022. 12. 28. 22:34
728x90

html

<!DOCTYPE html>
<html lang="en">
<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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class=" wrapper">
    <div class="carousel">
      <div class="box">
        <img src="https://via.placeholder.com/1200x300">
      </div>
      <div class="box">
        <img src="https://via.placeholder.com/1200x300/000">
      </div>
      <div class="box">
        <img src="https://via.placeholder.com/1200x300/e1f1f1">
      </div>
    </div>
  </div>

  <button class="btn1">1</button>
  <button class="btn2">2</button>
  <button class="btn3">3</button>
  <button class="next">다음</button>


    <!-- jQuery -->
 <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
    <!-- JS -->
 <script src="script.js"></script>
</body>
</html>

 

css

*{
  margin: 0;
  padding: 0;
}

.carousel{
  width: 300vw;

  transition: all 1s;
}

.box{
  width: 100vw;
  float: left;
}

.box img{
  width: 100%;
}

.wrapper{
  overflow: hidden;
}

 

js

//  //다음버튼
//  let no = 1;
//  //이미지박스위치를 알려주는 변수생성

//  $('.next').on('click',function(){
//   //이미지 박스가 몇번인지 알아야함 박스가 1번이면 1100vw이동 2번이면 -200vw이동
//   if(no===1){
//   $('.carousel').css('transform','translateX(-100vw)');
//   no++;
//   }else if(no===2){
//   $('.carousel').css('transform','translateX(-200vw)');
//   no++;
//   }
//   no===0;
//  });

// //1번 버튼 js
// document.querySelector('.btn1').addEventListener('click',function(){
//   document.querySelector('.carousel').style.transform = 'translateX(0)';
//   no=1;
//  });

// //2번 버튼 jQury
//  $('.btn2').on('click',function(){
//   $('.carousel').css('transform','translateX(-100vw)');
//   no=2;
//  });

//  //3번 버튼
//  $('.btn3').on('click',function(){
//   $('.carousel').css('transform','translateX(-200vw)');
//   no=3;
//  });




//================리팩토링================


let no = 1;
//이미지박스위치를 알려주는 변수생성
const carousel = $('.carousel');
//중복된코드 변수 설정(상대적으로 처리속도가 좀 더 빨라짐)
 //다음버튼
 $('.next').on('click',function(){
  if(no<3){
    carousel.css('transform',`translateX(-${no}00vw)`);
  no++;
  }
 });
 
//1번 버튼 js
document.querySelector('.btn1').addEventListener('click',function(){
  document.querySelector('.carousel').style.transform = 'translateX(0)';
  no=1;
 });

//2번 버튼 jQury
 $('.btn2').on('click',function(){
  $('.carousel').css('transform','translateX(-100vw)');
  no=2;
 });

 //3번 버튼 jQury
 $('.btn3').on('click',function(){
  $('.carousel').css('transform','translateX(-200vw)');
  no=3;
 });
728x90
저작자표시 (새창열림)

'JAVA_Script' 카테고리의 다른 글

자바스크립트(openAPI)  (0) 2022.12.30
자바스크립트(스크롤 이벤트, 정규식,회원가입페이지만들기)  (0) 2022.12.29
자바스크립트(버블링)  (1) 2022.12.27
자바스크립트(전자시계만들기)  (0) 2022.12.27
자바스크립트 (클래스 추가,삭제로 메뉴바,모달,tap메뉴 만들기)  (0) 2022.12.27
'JAVA_Script' Related Articles more
Comments