Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 데이터베이스 집합연산자
- 데이터베이스 JOIN
- 티모장인
- 데이터베이스 DELETE
- 데이터베이스
- 라이젠노트북
- 개발자준비
- 레노버 슬림3
- 오라클 DELETE
- 코딩초보자
- 자바입문
- 코딩입문
- SQL
- 사무용 노트북
- 레노버 노트북
- 데이터베이스 예제
- lenovo ideapad 3
- IdeaPad 3 15ABA7
- 레노버 아이디어패드 슬림3
- 가성비 노트북
- 오라클
- 오라클UPDATE
- 탑마이장인
- 데이터베이스기초
- 데이터베이스 기초
- 슬림3
- 코린이
- 자바초보
- 데이터베이스 UPDATE
- 코딩일기
Archives
- Today
- Total
스퐁지송 개발노트
자바스크립트(캐러셀) 본문
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 |
Comments