如何使幻燈片淡入淡出？

Question

我正在嘗試編輯當前的javascript文件，以使圖像幻燈片放映彼此淡化，而不是逐張跳轉。 這是我當前的代碼：

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

您可以在此處使用一些jQuery。 檢查fadeIn和fadeOut功能。 您也可以通過逐漸更改元素的不透明度來使用原始javascript實現此目的。