Javascript image swap with opacity
#1

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
Reply
#2

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/
Reply
#3

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


Forum Jump:


Users browsing this thread: 1 Guest(s)