Как добавить эффект слайда к слайдеру изображения 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 для манипулирования ими.