JavaScript를 사용하여 페이드 효과로 이미지 전환 구현

이미지 변환은 이미지를 변경하고 한 이미지를 다른 이미지로 바꾸는 것을 의미합니다. 사용자는 이미지 슬라이더에서 이미지 전환을 볼 수 있습니다.

이미지 슬라이더를 개발하는 동안 앱이 매력적인 사용자 경험을 가질 수 있도록 이미지 전환 애니메이션에 중점을 두어야 합니다. 이 튜토리얼에서는 다양한 이미지 전환 방법을 사용하여 페이드 효과를 추가하는 방법을 알아봅니다.

페이드 효과로 이미지를 표시하려면 이미지에 클래스를 추가하세요

CSS를 사용하여 이미지 전환에 페이드 효과를 추가할 수 있습니다. CSS의 전환 속성을 사용하면 이미지에 전환을 추가할 수 있습니다. 따라서 클래스에 CSS를 추가하고 JavaScript를 사용하여 이미지에 전환을 추가하는 클래스를 이미지에 추가할 수 있습니다

문법

사용자는 아래 구문에 따라 이미지에 클래스를 추가하여 페이드 효과로 이미지를 표시할 수 있습니다.

으아악

위 구문에서는 id를 사용하여 이미지에 액세스하고 "class_name" 클래스를 이미지의 클래스 목록에 추가합니다.

예

아래 예에서는 웹 페이지에 이미지를 추가하고 일부 CSS를 사용하여 높이와 너비를 지정했습니다. 또한 img 클래스에 불투명도 값 0을 추가했습니다.

또한 애니메이션 클래스에 "전환" 및 "불투명도" 속성을 추가했습니다. 처음에는 이미지에 "animate" 클래스가 포함되어 있지 않습니다. 사용자가 버튼을 클릭하면 FadeIn() 함수가 실행되어 "animate" 클래스가 이미지에 추가됩니다.

출력에서 "animate" 클래스를 추가하면 이미지가 페이드 인되는 것을 볼 수 있습니다.

으아악

jQuery의 fadeIn() 및 fadeout() 메서드를 사용하여 이미지에 페이드 전환 추가

JQuery의 fadeout() 메서드를 사용하면 페이드 효과를 사용하여 웹 페이지에서 이미지를 제거할 수 있습니다. fadeIn() 메소드를 사용하면 페이드 효과가 있는 이미지를 웹 페이지에 추가할 수 있습니다.

여기서는 fadeout() 및 fadeIn() 메서드를 사용하여 이미지 전환에 적절한 페이드 효과를 추가합니다.

문법

사용자는 다음 구문에 따라 JQuery의 fadeout() 및 fadeIn() 메서드를 사용하여 이미지 전환에 페이드 효과를 추가할 수 있습니다.

으아악

위 구문에서 현재 변수는 웹 페이지에 표시될 이미지를 추적합니다. fadeIn() 메소드를 사용하여 현재 이미지를 표시하고 다른 모든 이미지를 숨깁니다.

단계

1단계 – 클래스 이름을 사용하여 모든 이미지에 액세스합니다.

2단계 – for 루프를 사용하여 모든 이미지를 반복하고 이미지의 표시 속성을 사용하여 첫 번째 이미지를 제외한 모든 이미지를 숨깁니다.

3단계 – "current"라는 변수를 만들고 0으로 초기화합니다.

4단계 – startImageTrans() 함수를 만들고 그 안에 있는 setInterval() 메서드를 사용하여 3500밀리초마다 fade() 함수를 호출합니다. 그러나 사용자는 필요에 따라 시간 간격을 설정할 수 있습니다

5단계 – fade() 함수 내에서 JQuery의 eq() 메서드를 사용하여 현재 하위 항목에 액세스합니다. 현재 이미지를 숨기려면 fadeout() 메서드를 사용하십시오.

6단계 - 현재 변수의 값을 1씩 늘리거나, 전체 이미지 수보다 큰 경우 0으로 설정합니다.

7단계 – fadeIn() 메서드를 사용하여 현재 이미지를 표시합니다.

예

아래 예에서는 HTML div 요소를 만들고 5개의 서로 다른 이미지를 추가했습니다. 우리는 모든 이미지에 대해 페이드 전환 효과를 사용하여 하나씩 위의 알고리즘을 JavaScript로 구현했습니다.

으아악

CSS 전환 속성을 사용하여 이미지 전환에 페이드 효과 추가

이 방법에서는 HTML 요소의 배경 이미지를 설정합니다. 또한 HTML 요소의 배경에 페이드 전환을 추가합니다. 따라서 배경을 변경할 때마다 페이드 인 및 아웃됩니다.

문법

사용자는 다음 구문에 따라 CSS 전환 속성을 사용하여 배경 이미지에 페이드 효과를 추가할 수 있습니다.

으아악

위 구문에서 CSS를 사용하여 요소에 배경 이미지를 추가하고 배경으로 "전환"했습니다. JavaScript를 사용하여 배경 이미지를 변경할 때마다 이미지에 페이드 전환이 자동으로 적용됩니다.

예

아래 예에서 div 요소에는 초기 배경 이미지가 포함되어 있습니다. 우리는 다양한 배경 이미지의 URL을 포함하는 이미지 배열을 만들었습니다. setInterval() 메서드를 사용하여 3000밀리초마다 fadeInImage() 함수를 호출합니다.

fadeInImage() 함수에서는 배경 이미지를 반복적으로 변경하고, 이미지가 변경되면 CSS를 사용하여 페이드 전환을 수행합니다.

으아악

이미지 전환에 페이드 효과를 추가하는 세 가지 방법을 배웠습니다. 두 번째 방법에서는 JQuery의 fadeIn() 및 fadeout() 메서드를 사용했고, 첫 번째와 세 번째 방법에서는 CSS "transition" 속성을 사용했습니다.

위 내용은 JavaScript를 사용하여 페이드 효과로 이미지 전환 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!