Как добавить эффект слайда к слайдеру изображения JavaScript

Я новичок в 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>

Теперь, где можно редактировать код, чтобы добавить эффект слайда / затухания? А какой может быть код?

Достаточно простого слайд-эффекта слева направо и наоборот:)

заранее спасибо

1 ответ

Я бы посоветовал проверить JQuery, есть эффекты скольжения и затухания в изобилии, и он прост в использовании. Вы упомянули, что вы новичок в javascript - у Codecademy есть трек JQuery, который учит, как добавлять эффекты слайдов и затухания.

Это, к сожалению, означает, что вы не можете использовать уже написанный код javascript, так как изображения должны быть добавлены в html вместо javascript, поэтому вы можете затем использовать jQuery для манипулирования ими.

Другие вопросы по тегам