Avatar billede esbenn Nybegynder
22. januar 2010 - 17:54 Der er 5 kommentarer og
1 løsning

Automatisk billedskift med fade

Hej

Jeg bruger lige en et JavaScript til at skifte mellem billeder i mit banner:
<script type="text/javascript">
var pics = ["/wp-content/themes/GST2/images/banner/banner.jpg","/wp-content/themes/GST2/images/banner/banner2.jpg","/wp-content/themes/GST2/images/banner/banner3.jpg","/wp-content/themes/GST2/images/banner/banner4.jpg","/wp-content/themes/GST2/images/banner/banner5.jpg"];

var delay = 10;//tid mellem skift i sekunder

/* Herfra skulle der ikke være nogen grund til at rette
-- mens du selvfølgelig skal tilpasse de ovenstående variabler !-) */
var actnum = 0;
var imgs = new Array();
for(i=0; pics.length > i; i++){
  imgs[i] = new Image();
  imgs[i].src = pics[i];
}

function chgImg(){
  actnum = (++actnum)%pics.length;
  document.getElementById("billede").src = imgs[actnum].src;
  setTimeout("chgImg()",1000*delay);
}
setTimeout("chgImg()",1000*delay);
</script>

og

<img id="billede" src="/wp-content/themes/GST2/images/banner/banner.jpg">

Jeg ville dog gerne tilføje så der kommer en fade funktion mellem billederne, så det bliver en mere blød overgang end det er tilfældet nu... Kan det indføres i det script jeg har nu, eller har i et andet script liggende der kan gøre det?

På forhånd tak :)
Avatar billede intenz Novice
22. januar 2010 - 23:14 #1
Avatar billede mike2002 Nybegynder
24. januar 2010 - 23:25 #2
Der er mange forskellige muligheder for fade funktioner, men jeg ville hente jquery og skrive: (utestet)

function  chgImg() {
$(document).ready(function(){
  actnum = (++actnum)%pics.length;
  $("#billede").fadeOut('slow');
  $("#billede").src = imgs[actnum].src;
  $("#billede").fadeIn('slow');
  setTimeout("chgImg()",1000*delay);
});
}
setTimeout("chgImg()",1000*delay);

jquery kan hentes her : http://code.jquery.com/jquery-1.4.min.js

Skal bare inkluderes i dit head-element.
Avatar billede mike2002 Nybegynder
25. januar 2010 - 00:23 #3
Ups, det hedder i al fald:

$("#billede").attr("src",imgs[actnum].src);

- når man skal ændre kilde...
Avatar billede esbenn Nybegynder
02. februar 2010 - 00:22 #4
Så fik jeg endeligt tid til at kigge på det igen...

hente jquery?

Skal lige siges at jeg er rimeligt blank til JavaScript...
Avatar billede mike2002 Nybegynder
02. februar 2010 - 10:34 #5
jQuery kan hentes her:
http://code.jquery.com/jquery-1.4.1.min.js

Upload den til din webserver og inkluder den sådan:
<script type="text/JavaScript" src="sti/til/jquery/jquery-1.4.1.min.js"></script>
i dit <head></head>-tag.

Alternativt kan du linke direkte til jquery hosted hos Google
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Faktisk er der nogle, der mener, at dette er den foretrukne løsning, læs mere her: http://encosia.com/2008/12/10/3-reasons-why-you-should-let-google-host-jquery-for-you/
Avatar billede esbenn Nybegynder
21. juli 2010 - 23:15 #6
Tror det er tid til en lukker...
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester