mardi 5 juillet 2016

Javascript image slider transition

I'm looking for a code, which adds a transition after the picture changes. Here's my code:

<script type = "text/javascript">
    function displayNextImage() {
        x = (x === images.length - 1) ? 0 : x + 1;
        document.getElementById("img").src = images[x];
    }

    function displayPreviousImage() {
        x = (x <= 0) ? images.length - 1 : x - 1;
        document.getElementById("img").src = images[x];
    }

    function startTimer() {
        setInterval(displayNextImage, 3000);
    }

var images = [], x = -1;
images[0] = "1.jpg";
images[1] = "2.jpg";
images[2] = "3.jpg";
</script>

<body onload = "startTimer()">
<img id="img" src="1.jpg"/>
</body>

Is there any possible way to add some transition when the code changes the image?

Aucun commentaire:

Enregistrer un commentaire