jQuery slideshow

JavaScript:

var bilder = [ // bildene våre
        "img/1.jpg",
        "img/2.jpg",
        "img/3.jpg",
        "img/4.jpg" 
        ];
var i=0; // teller

setInterval(pictureSlide, 5000); // kjør pictureSlide() hvert 5 sekund

function pictureSlide() {
  i++; // øk teller
  if (i == bilder.length) { i=0; } // sett til 0 hvis vi har gått rundt
  var currentImage = $('#slideshow > img');
  var nextImage = $(''); // lag det nye bildet
  nextImage.hide(); // gjem det
  $('#slideshow').prepend(nextImage); // legg til bildet
  nextImage.fadeIn(5000); // fade inn
  currentImage.fadeOut(5000, $(this).remove); // fade ut gammelt bilde samtidig, og fjern etterpå
};

CSS:

#slideshow img {
  position: absolute; // plasserer bildene "oppå" hverandre
}

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>