일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- nest.js 순환 종속성
- javascript 테스트
- 첫코딩
- nest.js forwardRef
- react jest
- ScrollView 무한 스크롤
- mock api를 이용한 react 테스트
- TodoList 테스트 코드
- react 테스트
- JavaScript
- Testing-library/react
- jest
- FlatList 무한 스크롤
- nest.js 순환 참조
- react
- TDD방식으로 리액트 테스팅
- mock api 사용법
- React 테스트코드
- 프로젝트 배포하기
- 리액트 테스트 코드
- react native 무한스크롤
- 리액트 테스트
- HTML
- nest.js circular Dependency
- 비동기 테스트
- react testing library 비동기 테스트 사용법
- 개발
- React Testing Library
- CSS
- 첫 코딩
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 |
Comments