728x90
반응형
2023 웹디자인 기능사 실기 레이아웃: 이미지 슬라이드 이펙트
레이아웃, 메뉴바, 이미지 슬라이드
참고
- 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd
- 레이아웃 코드 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/layout
- MENU-1, MUNUE-2 참고 : https://github.com/dongjin6539/web2023/tree/main/webd/menu
- IMAGE SLIDE 이펙트 참고(s-1, s-2, s-3) : https://github.com/dongjin6539/web2023/tree/main/webd/menu
- 레이아웃 다양한 방법 참고 : https://dongjin6539.github.io/web2023/layout/index.html
이미지 슬라이드 우측으로 이동
방법1
- 마지막 이미지에 도달했을 때 처음이미지로 슬라이드하면서 이동하는 방법
- 참고 : https://dongjin6539.tistory.com/73
<script>
// 선택자
const section = document.querySelector("#section");
const sliderImg = section.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = section.querySelector(".slider__inner"); // 움직이는 영역
const slider = section.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
let sliderHeight = slider[0].offsetHeight; // 이미지 세로값
let sliderClone = sliderInner.lastElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
// 마지막 이미지에 도달했을 때 처음이미지로 슬라이드하면서 이동
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY(" + -300 * currentIndex + "px)";
}, sliderInterval);
</script>
방법2
- 마지막 이미지에 도달했을 때 처음이미지로 바로 이동하는 방법
- 참고 : https://dongjin6539.tistory.com/75
<script>
// 선택자
const section = document.querySelector("#section");
const sliderImg = section.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = section.querySelector(".slider__inner"); // 움직이는 영역
const slider = section.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
let sliderWidth = slider[0].offsetWidth; // 이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
// 마지막 이미지에 도달했을 때 처음이미지로 바로 이동
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex + "px)";
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateX(0px)";
}, 700);
currentIndex = 0;
}
};
setInterval(sliderEffect, sliderInterval);
</script>
이미지 슬라이드 위로 이동
방법1
- 마지막 이미지에 도달했을 때 처음이미지로 슬라이드하면서 이동하는 방법
- 참고 : https://dongjin6539.tistory.com/73
<script>
// 선택자
const section = document.querySelector("#section");
const sliderImg = section.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = section.querySelector(".slider__inner"); // 움직이는 영역
const slider = section.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
let sliderHeight = slider[0].offsetHeight; // 이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
// 마지막 이미지에 도달했을 때 처음이미지로 슬라이드하면서 이동
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY(" + -300 * currentIndex + "px)";
console.log(currentIndex);
}, sliderInterval);
</script>
방법2
- 마지막 이미지에 도달했을 때 처음이미지로 바로 이동하는 방법
- 참고 : https://dongjin6539.tistory.com/75
<script>
// 선택자
const section = document.querySelector("#section");
const sliderImg = section.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = section.querySelector(".slider__inner"); // 움직이는 영역
const slider = section.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
let sliderHeight = slider[0].offsetHeight; // 이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
// 마지막 이미지에 도달했을 때 처음이미지로 바로 이동
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateY(-"+ sliderHeight * currentIndex + "px)";
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)";
}, 700);
currentIndex = 0;
}
console.log(currentIndex);
};
setInterval(sliderEffect, sliderInterval);
</script>
이미지 슬라이드 아래로 이동
방법1
- 마지막 이미지에 도달했을 때 처음이미지로 슬라이드하면서 이동하는 방법
<script>
// 선택자
const section = document.querySelector("#section");
const sliderImg = section.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = section.querySelector(".slider__inner"); // 움직이는 영역
const slider = section.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
let sliderHeight = slider[0].offsetHeight; // 이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
// 마지막 이미지에 도달했을 때 처음이미지로 슬라이드하면서 이동
sliderInner.style.transition = "all 0.6s";
setInterval(() => {
currentIndex = (currentIndex + 1) % sliderCount;
sliderInner.style.transform = "translateY(" + 300 * currentIndex + "px)";
}, sliderInterval);
</script>
방법2
- 마지막 이미지에 도달했을 때 처음이미지로 바로 이동하는 방법
<script>
// 선택자
const section = document.querySelector("#section");
const sliderImg = section.querySelector(".slider__img"); // 보여지는 영역
const sliderInner = section.querySelector(".slider__inner"); // 움직이는 영역
const slider = section.querySelectorAll(".slider"); // 개별 이미지
let currentIndex = 0; // 현재 보이는 이미지
let sliderCount = slider.length; // 이미지 갯수
let sliderInterval = 3000; // 이미지 변경 간격 시간
let sliderHeight = slider[0].offsetHeight; // 이미지 세로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
// 복사한 첫번째 이미지 마지막에 붙여넣기
sliderInner.appendChild(sliderClone);
// 마지막 이미지에 도달했을 때 처음이미지로 바로 이동
function sliderEffect(){
currentIndex++;
sliderInner.style.transition = "all 0.6s";
sliderInner.style.transform = "translateY("+ sliderHeight * currentIndex + "px)";
// 마지막 이미지에 위치 했을 때
if(currentIndex == sliderCount){
setTimeout(() => {
sliderInner.style.transition = "0s";
sliderInner.style.transform = "translateY(0px)";
}, 700);
currentIndex = 0;
}
};
setInterval(sliderEffect, sliderInterval);
</script>
방법1 JAVASCRIPT 구성
- 이미지 슬라이드 구역, 이미지가 보이는 영역, 이미지가 움직이는 영역, 개별 이미지 영역을 각각 선택자로 줍니다.
- 변수 currentIndex를 0으로 현재 보이는 이미지를 저장, 변수 sliderCount를 개별 이미지 영역의 length로 이미지 갯수를 저장, 변수 sliderInterval로 3000밀리초로 이미지 변경 간격 시간을 저장, 각각 변수 sliderWeight, 변수 sliderHeight로 개별 이미지 영역의 첫번째 이미지의 offsetWieght와 offsetHeight로 각각 이미지의 가로값과 세로값을 저장, 변수 sliderClone로 이미지 움직이는 영역의 firstElementChild를 가져와서 이미지를 복사했을 때 cloneNode(true)를 저장시켜줍니다.
- 이미지 움직이는 영역에 appendChild로 sliderClone를 마지막 이미지에 붙여줍니다.
- 다음 스타일을 주는데 선택자 sliderInner 이미지 움직이는 영역에 transition으로 all 0.6s를 줍니다.
- setInterval 함수를 사용해줍니다. 변수 currentIndex를 이미지의 갯수에 맞게 알맞는 식의 데이터로 변경시켜줍니다. 선택자 sliderInner 이미지가 움직이는 영역에 스타일을 transform을 translateX, translateY를 입력해서 이미지의 가로값, 세로값을 입력하고 알맞는 데이터로 변경된 변수 currentIndex를 곱해줍니다.
- 그리고 변수 sliderInterval로 3000밀리초로 이미지 변경 간격 시간을 저장한것을 입력해줍니다.
방법2 JAVASCRIPT 구성
- 이미지 슬라이드 구역, 이미지가 보이는 영역, 이미지가 움직이는 영역, 개별 이미지 영역을 각각 선택자로 줍니다.
- 변수 currentIndex를 0으로 현재 보이는 이미지를 저장, 변수 sliderCount를 개별 이미지 영역의 length로 이미지 갯수를 저장, 변수 sliderInterval로 3000밀리초로 이미지 변경 간격 시간을 저장, 각각 변수 sliderWidth, 변수 sliderHeight로 개별 이미지 영역의 첫번째 이미지의 offsetWidth와 offsetHeight로 각각 이미지의 가로값과 세로값을 저장, 변수 sliderClone로 이미지 움직이는 영역의 firstElementChild를 가져와서 이미지를 복사했을 때 cloneNode(true)를 저장시켜줍니다.
- 이미지 움직이는 영역에 appendChild로 sliderClone를 마지막 이미지에 붙여줍니다.
- 함수를 변수 sliderEffect로 실행시키고 변수 currentIndex를 ++ 연산자로 이미지의 갯수로 데이터를 변경시키게 해줍니다.
- 다음 스타일을 주는데 선택자 sliderInner 이미지 움직이는 영역에 transition으로 all 0.6s를 줍니다.
- setInterval 함수를 사용해줍니다. 변수 currentIndex를 이미지의 갯수에 맞게 알맞는 식의 데이터로 변경시켜줍니다. 선택자 sliderInner 이미지가 움직이는 영역에 스타일을 transform을 translateY를 입력해서 이미지의 가로값, 세로값을 구한 변수 sliderWidth, 변수 sliderHeight의 각각 알맞는 데이터로 변경된 변수 currentIndex를 곱해줍니다.
- 마지막 이미지에 도달했을 때 if문을 사용해줍니다. setTimeout 함수를 사용해서 선택자 sliderInner 이미지 움직이는 영역에 transition으로 0s를 주고 transform으로 translateX, translateY를 0으로 이동시켜줍니다. 그리고 변수 currentIndex를 0으로 다시 변경시켜줍니다.
- 그리고 setInterval 함수를 사용해서 위의 함수 sliderEffect를 입력하고 변수 sliderInterval로 3000밀리초로 이미지 변경 간격 시간을 저장한것을 입력해줍니다.
728x90
반응형
