Javascript image swap with opacity

Javascript image swap with opacity - Printable Version

+- SA-MP Forums Archive (https://sampforum.blast.hk)
+-- Forum: Other (https://sampforum.blast.hk/forumdisplay.php?fid=7)
+--- Forum: Everything and Nothing (https://sampforum.blast.hk/forumdisplay.php?fid=23)
+--- Thread: Javascript image swap with opacity (/showthread.php?tid=599547)

Javascript image swap with opacity - Maximun - 27.01.2016

Hello everyone, So as the title saying I want to make a pictures on my page html, but with a changing every 5s, I already found the code about this, but whene the picture changing it change so fast and that's not what I want, Can someone help me in that issue please?

In this link, we can see the last picture it change slow whene we click on boutton (image one - image two), And that's what I want, but it doesn't change alone.

The code which I use

- HTML :

PHP код:



<body onload="startTime();">

    <img id="img" />

</body>

- JS :

PHP код:



<script>

var imgArray = new Array("images/picture1.png","images/picture2.png");

var imgCount = 0;

function startTime() {

    if(imgCount == imgArray.length) {

        imgCount = 0;

    }

    document.getElementById("img").src = imgArray[imgCount];

    imgCount++;

    setTimeout("startTime()", 4000);

}

</script>

PS: I'm so sorry for my bad english if anything is strange, please tell me and I will do my best to explain

Re: Javascript image swap with opacity - BroZeus - 27.01.2016

I recommed you using jquery. It makes things a lot of easier
Here I did this with jquery does what you want. I have tried to explain things in comments, see the demo for code and comments.
Working Demo : https://jsfiddle.net/sqozxthv/

Re: Javascript image swap with opacity - Maximun - 27.01.2016

That's what I want, thank you very much for your help and that info.