일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 첫코딩
- React Testing Library
- 비동기 테스트
- mock api를 이용한 react 테스트
- CSS
- Testing-library/react
- react
- javascript 테스트
- jest
- React 테스트코드
- HTML
- ScrollView 무한 스크롤
- react jest
- react testing library 비동기 테스트 사용법
- 프로젝트 배포하기
- nest.js forwardRef
- 리액트 테스트 코드
- mock api 사용법
- 첫 코딩
- TodoList 테스트 코드
- JavaScript
- TDD방식으로 리액트 테스팅
- nest.js 순환 종속성
- nest.js circular Dependency
- 리액트 테스트
- FlatList 무한 스크롤
- nest.js 순환 참조
- 개발
- react native 무한스크롤
- react 테스트
Archives
- Today
- Total
성장을 위한 기록
js. slideimage (슬라이드 이미지) 본문
버튼 클릭 시 이동하는 슬라이드 이미지
let slideImage = document.querySelectorAll("#slideImage > img"); //이미지 가져오기
let prev = document.getElementById("prev"); // 이전 버튼 가져오기
let next = document.getElementById("next"); // 다음 버튼 가져오기
let current = 0;
prev.onclick = prevSlide; // 이전 버튼 클릭 시 함수 실행
next.onclick = nextSlide; // 다음 버튼 클릭 시 함수 실행
function changeSlide(n){
for( let i = 0 ; i < slideImage.length; i++){
slideImage[i].style.display = "none"; // 반복문을 통해 모든 이미지 none
}
slideImage[n].style.display = "block"; // 해당 값에 이미지 block
}
function prevSlide(){
if(current > 0){ // 현재 이미지가 처음이 아니라면
current -= 1; // 현재 이미지에서 -1로 이동
}else{
current = slideImage.length - 1; // 현재 이미지가 처음이라면 마지막 이미지로 이동
}
changeSlide(current); // 함수 실행
}
function nextSlide(){
if(current < slideImage.length - 1){ // 현재 이미지가 마지막이 아니라면
current +=1; // +1 이미지로 이동
}else{
current = 0; // 마지막이라면 처음 이미지로 이동
}
changeSlide(current); // 함수 실행
}
'FE (Front End) (구) > javascript' 카테고리의 다른 글
js 중급 기본 정리 (with 앙마코딩) 숫자 매서드 Number, Math (0) | 2022.03.11 |
---|---|
js 중급 기본 정리 (with 앙마코딩) 생성자 함수(new) 객체 메서드, 계산된 프로퍼티, 심볼 Symbol (0) | 2022.03.10 |
문서 객체 모델 DOM (0) | 2022.02.10 |
자바스크립트 객체(2) (0) | 2022.02.08 |
자바스크립트 객체(1) (0) | 2022.02.08 |