0

We have a school project where we are going to create a website. There is a requirement that we shall have a picture that ever 10s or so switch to a new picture. I was able to make it happen with an easy JavaScript code, but it does not look so good. There is no transition between the pictures. I wonder if someone can help me fix so that there is a transition when a picture switch to another one! Here is my javascript code:

    var bilder = ["img/nature1.jpg","img/nature2.jpg","img/nature3.jpg","img/nature4.jpg"];
var count = 0;

function bildspel() {
    document.getElementById("bildfram").src = bilder[count];
    count++;
    if (count > (bilder.length-1)) {
        count = 0;
    }
}

setInterval("bildspel()",10000);

Thanks in advance!

robeng
  • 85
  • 2
  • 10
  • 1
    You should probably use jquery and use the fadeIn and fadeOut methods – Paul Fitzgerald Jan 12 '17 at 15:28
  • Can you use CSS? The most straight forward way is to build transition CSS classes and then add/remove them with Javascript. – D. Walsh Jan 12 '17 at 15:30
  • 1
    http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css – mplungjan Jan 12 '17 at 15:30
  • 1
    What kind of transition? Fade in and out? Crossfade? Swipe? Flip? Page turn? Swivel? Blinds? Checkerboard? Zoom? When you've decided which one, google for "javascript X transition" where X is the effect you want. – JJJ Jan 12 '17 at 15:34
  • why don't you try using flexslider full simple and beautiful to look http://flexslider.woothemes.com/ – Stefanija Jan 12 '17 at 15:38

0 Answers0