How does one add a slide effect to a javascript image slider

Question

I am new to JavaScript and want to learn from scratch. I recently managed to create an image slideshow, but as of yet it has no slide/fade effects. I would appreciate if anyone could help me out as no other tutorials/answers have been helpful.

Here is my JavaScript code:

<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>

Here is my HTML code:

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

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

Now, where does one edit the code in order to add a slide/fade effect? And what might the code be?

A simple left to right - and visa versa - slide effect will suffice :)

Thanks in advance

Answer 1

My advise would be to check out JQuery, there are slide and fade effects galore and it is simple to use. Your mentioned you were new to javascript - Codecademy have a JQuery track that teaches how to add slide and fade effects.

That would unfortunately mean that you can't use the javascript code you've already written, as the images would have to be added in html instead of javascript, so you can then use jQuery to manipulate them.