设置简单javascript幻灯片的动画

我在我的电脑上做了一个简单的幻灯片，现在想给它制作动画。我只想让图像彼此淡入淡出。我不想使用jQuery，因为这可能是我网站上唯一需要的js。如果有必要，jQuery也可以

预加载图像（在网站头部）

幻灯片位置的代码（然后脚本更改图像src）

我可以做一些CSS动画，但我对javascript还不熟悉。

假设这个HTML：

<div class="slideshow">
    <div class="image-front"><img src="photo1.png" /></div>
    <div class="image-back"><img src="photo2.png" /></div>
</div>

然后在

.5

秒后，将

图像背面

中的图像交换到

图像正面

Html：

<div>
        <a href="#"><img src="back.png" title="back" id="back"></a>
        <a href="#"><img src="next.png" title="next" id="next"></a>
</div>

<img src="image1.png" id="image1" />
<img src="image2.png" id="image2" />
<img src="image3.png" id="image3" />

要转到下一个图像：

$('#next').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual++;
        if(actual > 3){
         actual = 1;
        }
        $('#image' + actual).fadeIn();          
    });
});

要转到previos图像：

$('#back').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual--;
        if(actual == 0){
         actual = 3;
        }
        $('#image' + actual).fadeIn();          
    });
});

---

我只是写了这篇文章，还没有测试过，但我认为这是可行的。

不幸的是，它不起作用。你可以在我的网站上看看。谢谢你的努力。也许我做错了什么？看看你的网站，似乎缺少全局变量\u actual。请检查您是否正在全局创建此变量，并且不要忘记使用值1初始化它。我应该在哪里设置变量实际值？在与按钮相同的脚本中或在头部或何处？

<div>
        <a href="#"><img src="back.png" title="back" id="back"></a>
        <a href="#"><img src="next.png" title="next" id="next"></a>
</div>

<img src="image1.png" id="image1" />
<img src="image2.png" id="image2" />
<img src="image3.png" id="image3" />

var actual = 1;

$('#next').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual++;
        if(actual > 3){
         actual = 1;
        }
        $('#image' + actual).fadeIn();          
    });
});

$('#back').click(function(){    
    $('img').stop(true, true);
    $('#image' + _actual).fadeOut(function(){
        actual--;
        if(actual == 0){
         actual = 3;
        }
        $('#image' + actual).fadeIn();          
    });
});