자바 스크립트를 사용하여 FadeOut/FadeIn 이벤트가 포함 된 슬라이드 쇼

Question

아주 간단한 슬라이드 쇼를 만들었지 만 페이드 인/페이드 아웃 효과를 통합하는 방법을 알 수는 없습니다. JQuery를 사용하는 것이 가장 좋음을 읽었지 만 일부는 표준 JavaScript가 또한 트릭을 수행 할 것이라고 제안했습니다. 어쨌든 여러 스크립트를 시도했지만 아무 것도 작동하지 않는 것 같습니다. 여기 누군가가 도울 수 있다면 나는 그들의 빚을 질 것이다!

<script type = "text/javascript"> 
    var Image = new Array("pics/21cents.png", "pics/22cents.png", "pics/23cents.png"); 
    var Image_Number = 0; 
    var Image_Length = Image.length - 1; 
    var x; 
    function change_image(num) { 
     Image_Number = Image_Number + num; 
     if (Image_Number > Image_Length) { 
      Image_Number = 0; 
     } 
     if (Image_Number < 0) { 
      Image_Number = Image_Length; 
     } 
     document.slideshow1.src=Image[Image_Number]; 
     return false; 
    } 
    function auto() { 
     x = setInterval("change_image(-1)", 5000); 
    } 
    function stop() { 
     clearInterval(x); 
    } 
    auto(); 
</script> 

Answer 1

이 작업을 수행하는 가장 쉬운 방법은 jQuery를 사용하여 지금까지 :

여기 내 코드입니다. 유용한 UI 효과 (예 : slideDown(), fadeOut() 등) 외에도 DOM 요소를 쉽게 선택하고 조작 할 수 있습니다. 당신이 jQuery를 사용하려고한다면

는 예를 들어, 같은만큼 쉬운 것입니다 :

var $img = $("<img>").css({"display": "none"}).prop("src", "http://placehold.it/500x500"); 
$("div").html($img); 
$("img").fadeIn(); 

그렇지 않으면 변경, 당신은 setInterval() 루프의 somesort를 설정해야합니다 fadeIn/아웃 효과를 얻을 수있는 각 반복마다 불투명도를 백분율로 나타냅니다. EG :

setInterval(function() { 
    var img = document.getElementById("image"); 

    var opacity = img.style.opacity; 
    if(opacity !== 1) { 
     img.style.opacity += 0.01; 
    } 
}, 100);