如何将幻灯片效果添加到javascript图像滑块

时间:2013-02-08 12:23:53

标签: javascript slideshow jquery-slide-effects

我是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 个答案:

答案 0 :(得分:1)

我的建议是查看JQuery,有很多幻灯片和淡入淡出效果,并且使用起来很简单。你提到的你是javascript的新手 - Codecademy有一个JQuery轨道,讲授如何添加幻灯片和淡入淡出效果。

遗憾的是,你不能使用你已经编写过的javascript代码,因为图像必须用html而不是javascript添加,所以你可以使用jQuery来操作它们。