JavaScript131 이펙트 응용편 - 게임 첫번재 게임이펙트 코드보세요. 원본 소스 보기 원본 사이트 보기 2022. 10. 21. 이펙트 응용편 - 슬라이더 칠번째 이미지 버튼클릭으로 움직이기 버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이. JS 설명 그동안 배웠던 슬라이더 이펙트를 최대한 활용한것입니다. 따로 설명은 없습니다. 코드 보기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //보여지는영역 const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역 const slider = document.querySelectorAll(".slider"); //각각 이미지 const sliderDot = document.qu.. 2022. 10. 21. 이펙트 응용편 - 슬라이더 육번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼, 닷메뉴 및 무한이동 이됩니다. JS 설명 checkIndex() 함수는 sliderInner주었던 transition을 지우고 첫번째 와 마지막 이미지로 돌려보냅니다. 코드 보기 //순간이동 슬라이드 function checkIndex() { sliderInner.classList.remove("transition"); if (currentIndex == sliderLength) { sliderInner.style.left = -(1 * sliderWidth) + "px"; currentIndex = 0; } if (currentIndex == -1) { sliderInner.style.left = -(sliderLength * sliderWid.. 2022. 10. 21. 이펙트 응용편 - 슬라이더 오번째 이미지 버튼클릭으로 움직이기 이번 슬라이더 이펙트는 버튼, 닷메뉴 가있습니다. JS 설명 닷버튼을 클릭했을때 닷의 인덱스 값을 gotoSlider에 보내주어서 합니다. 코드 보기 //닷버튼 클릭했을때 document.querySelectorAll(".slider__dot .dot").forEach((e, i) => { e.addEventListener("click", () => { gotoSlider(i); }); }); 원본 소스 보기 원본 사이트 보기 2022. 10. 21. 이펙트 응용편 - 서치 칠번째 검색 이펙트 이번 이펙트는 타이머을 추가하여 문제를 맞추는것입니다.. JS코드 정답을 체크하는 함수입니다. input박스에 값을 넣으면 자동으로 체크하여 보여줍니다. 코드 보기 let timeReamining = 120, //남은 시간 score = 0, //점수 timeInterval = "", answers = {}; //새로운 정답 function checkInput() { let input = event.currentTarget.value.trim().toLocaleLowerCase(); if (answers.hasOwnProperty(input) && !answers[input]) { answers[input] = true; //정답 표시하기 searchAnswers.style.display =.. 2022. 10. 21. 이펙트 용용편 - 서치 육번째 검색 이펙트 이번 이펙트는 정렬하는 기능을 구현했습니다. JS코드 sort를 이용하여 정렬을 구현했습니다. 코드 보기 //반대로 정렬 function sortReverse() { cssProperty.reverse(); updateList(); } // 내림차순 function sortDescending() { cssProperty.sort((a, b) => b.num - a.num); updateList(); } // 오름차순 function sortAscending() { cssProperty.sort((a, b) => a.num - b.num); updateList(); // 알파벳(a-z) 정렬 function sortAlphabet() { cssProperty.sort(function (a, b.. 2022. 10. 21. 이전 1 ··· 3 4 5 6 7 8 9 ··· 22 다음 728x90 반응형
