HTML로 페이드하여 그림을 이동합니다.

Question

그림이 몇 개 있으며 HTML에서 단추를 클릭하여 탐색 할 수 있습니다. 사용자가 클릭 할 때 발생하는 효과가 필요합니다. 내 페이지를 새로 고침하고 싶지 않습니다. Javascript 나 CSS가 도움이 될까요? "다음"버튼을 누르면 다음 이미지가 부드럽게 화면에 희미해질 수 있습니다.

Answer 1

이 같은 div이있는 경우 :

<div id="yourDivId" > 
    <img id="image_1_Id" class="" src="image_1.png" /> 
    <img id="image_2_Id" class="transparent" src="image_2.png" /> 
</div> 

삽입 CSS 파일이 코드 :

#yourDivId img.transparent 
{ 
    opacity:0; 
} 
#yourDivId img 
{ 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

그리고 당신의 자바 스크립트 파일이나 HTML 헤드 스크립트에이 스크립트를 추가

function btnClicked(){ 
    document.getElementById("image_1_Id").className += "transparent"; 
    document.getElementById("image_2_Id").className = ""; 
} 

더 많은 예제를 보려면 http://css3.bradshawenterprises.com/cfimg/을 확인하십시오!

Answer 2

jQuery주기를 사용해보십시오. 사용 가능한 전환이 많으며 외부 이전/다음 제어로 설정할 수 있습니다.

홈페이지 플러그인 페이지 : http://jquery.malsup.com/cycle/

데모를 사용하여 이전/다음 링크 : http://jquery.malsup.com/cycle/int2.html