如何將一個幻燈片效果添加到JavaScript圖像滑塊

Question

我是JavaScript新手，想從頭開始學習。我最近設法創建了一個圖像幻燈片，但至今它沒有幻燈片/淡入淡出效果。 如果有人能幫助我，因爲沒有其他教程/答案有幫助，我將不勝感激。

這裏是我的JavaScript代碼：

<script> 
var images = new Array; 

images[1] = "_images/_slideshow/slideImg01.png"; 
images[2] = "_images/_slideshow/slideImg02.png"; 
images[3] = "_images/_slideshow/slideImg03.png"; 
images[4] = "_images/_slideshow/slideImg04.png"; 
images[5] = "_images/_slideshow/slideImg05.png"; 

var currentImage = 1; 

function changeimage(change){ 
    currentImage += change; 
    if(currentImage > images.length -1){ 
     currentImage = 1; 
    } 
    else if(currentImage < 1){ 
     currentImage = images.length -1; 
    } 
    document.getElementById('slideshowIMG').innerHTML = '<img src="' + 
    images[currentImage] + '"/>'; 
} 

changeimage(0); 
</script> 

這裏是我的HTML代碼：

<div id="slideshow"> 
    <div id="slideshowIMG"></div> 

    <div id="slideshowcontrols"> 
     <a onclick="changeimage(-1);">next</a> 
     <a onclick="changeimage(1);">prev</a> 
    </div> 
</div> 

現在，哪裏一個編輯，以添加幻燈片的代碼/淡入淡出效果？代碼可能是什麼？

一個簡單的左到右 - 反之亦然 - 幻燈片效果就足夠了:)提前

感謝

Answer 1

我的建議是檢查出來的JQuery，有滑動和淡化效果的稱譽，它是簡單易用。你提到你是javascript新手 - Codecademy有一個JQuery軌道，教導如何添加幻燈片和淡入淡出效果。

這將不幸意味着您不能使用您已經編寫的javascript代碼，因爲圖像必須以html而不是javascript添加，所以您可以使用jQuery來操作它們。