change_image 함수에 페이드 효과를 추가하는 방법

Question

javascript에 이미지 변경 기능이있는 이미지 배열이 있습니다. 이 함수는 html로 (href = "javascript : change_image (1) with the HTML에서 링크로 링크 된 이미지에 의해 호출됩니다.)

스크립트는 HTML로로드 될 때 잘 작동하지만, 페이드 효과를 추가하고 싶습니다 그것에 수 있도록 각 이미지는 페이드 아웃되고 새가 페이드 누군가가 올바른 방향으로 날을 넣을 수 내가 정말 감사

..

스크립트 :.?

var Image = new Array("Img/1.jpg","Img/2.jpg","Img/3.jpg","Img/4.jpg","Img/5.jpg","Img/6.jpg"); 

var Image_Number = 0; 
var Image_Length = Image.length - 1; 

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.slideshow.src= Image[Image_Number]; 

return false; 
} 

Answer 1

방법에 대한 이?

HTML :

<img id="image" src="Img/1.jpg"><br> 
<span id="change_image">Change image!</span> 

JS :

var images = ["Img/1.jpg", "Img/2.jpg", "Img/3.jpg", "Img/4.jpg"]; 

$(document).ready(function(){ 
    var image_number = 0; 
    // Click handler for "change image" link 
    $("#change_image").click(function(){ 
     // Get number of next image (loop) 
     image_number = (image_number + 1) % images.length; 
     // Make sure the image is loaded (if not, preload it) 
     $("<img>").attr("src", images[image_number]).load(function(){ 
      // As soon as the next image is loaded, fade out the current one... 
      $("#image").fadeOut(function(){ 
       // ...and fade in the new image :) 
       $(this).attr("src", images[image_number]).fadeIn(); 
      }); 
     }); 
    }); 
}); 

DEMO (JSFiddle)