如何使幻灯片淡入淡出？

Question

Im trying to edit my current javascript file to make my image slideshow fade into each other rather than jumping from picture to picture. Here is my current code:

var MyImage=document.getElementById("myPhoto");

var imageArray=["workone.jpg", "worktwo.jpg", "workthree.jpg"]

var imageIndex=0;

function changeImage () {
myPhoto.setAttribute("src", imageArray [ imageIndex]);
imageIndex++;
if (imageIndex>=imageArray.length) {
    imageIndex=0;
}
}

var intervalHandle = setInterval(changeImage,4000);

myPhoto.onclick=function() {
clearInterval(intervalHandle);
}    

Answer 1

You can use some jQuery here. Check the fadeIn and fadeOut functions. You can also achieve this with raw javascript by changing the element's opacity gradually.