Untitled

<html>
<head>
<script>
//example: images = ["air.jpg", "evening.jpg", "penguin.jpg"];
// insert your images here
images = ["https://linuxfr.org/images/linuxfr2_moutain.png", "https://linuxfr.org/images/logos/DaLinux-LoftStory-frenchPage.png", "https://linuxfr.org/images/logos/linuxfr-ohl2.png"];
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function next() {
    currentimage++;
    if (currentimage >= images.length)
        currentimage = 0;
    fadeAndSet();
}

function previous() {
    currentimage--;
    if (currentimage < 0)
        currentimage = images.length - 1;
    fadeAndSet();
}

function fadeAndSet() {
    $("#preimage").attr('src', images[currentimage]);
    centerObj("#preimage");

    $("#image").fadeOut(1000, function() {
        $("#image").attr('src', $("#preimage").attr('src'));
        $("#image").show();
        $("#image").css('left', $("#preimage").css('left'));
    });
    $("#preimage").fadeIn(1000, function () {
        $("#preimage").hide();
    });
}

function centerObj(sel) {
    var iw = $(sel).width();
    //var nh = $("#preimage").height();
    //var ow = $("#image").width();
    //var oh = $("#image").height();
    var ww = $(window).width();
    $(sel).css('left', (ww - iw) / 2);
}

$(window).resize(function () {
    centerObj("#preimage");
    centerObj("#image");
});

currentimage = 0;

$(window).load(function () {
    $("#image").attr('src', images[currentimage]);
    centerObj("#image");
});
</script>
<style>
#preimage {
    display: none;
}

#preimage, #image {
    position: absolute;
    top: 3em;
}
</style>
</head>
<body>

<a href="javascript:previous()">&lt;</a> - <a href="javascript:next()">&gt;</a>

<div id="images">
<img id="preimage" />
<img id="image" />
</div>

</body>
</html>