如何将一个幻灯片效果添加到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来操作它们。