Søg
Avatar billede nph12 Nybegynder
04. oktober 2008 - 13:51 Der er 30 kommentarer og
3 løsninger

Banner rotation

Hej
Hvordan laver jeg en banner rotation? I banner rotationen skal jeg kunne angive, hvor lang tid hver banner skal vises.
Avatar billede w13 Novice
04. oktober 2008 - 23:06 #1
http://www.hotscripts.com/JavaScript/Scripts_and_Programs/Banner_Rotation/index.html :)
Avatar billede nph12 Nybegynder
05. oktober 2008 - 10:40 #2
Jeg vil godt selv lære at lave banner rotationen, men mangler lidt hjælp til at komme igang.

Skal jeg ikke starte med, at putte alle bannerne ind i et array? Her kan jeg vel også angive, hvor lang tid hver banner skal vises? For at få vist banner rotationen laver jeg en løkke som gennemløber arrayet.

Hvordan skriver jeg koden til dette?
Avatar billede w13 Novice
05. oktober 2008 - 12:27 #3
Vi starter, som du siger med at lægge billederne i et array og så skal vi have en funktion, der viser et billede. Og sidst skal vi have noget, som opdaterer med et nyt billede efter x-antal milisekunder. Dette gøres med setTimeout.

<a id="bannerlink" target="_blank">
  <img id="bannerrotation">
</a>

<script type="text/javascript">
var aBanners = [
  ["src" : "billede1.jpg", "href" : "http://www.google.com"],
  ["src" : "billede2.jpg", "href" : "http://www.eksperten.dk"],
  ["src" : "billede3.jpg", "href" : "http://www.facebook.com"]
];

var iBannerDelay = 2000; // angives i milisekunder

function bannerRotate(i){

  document.getElementById("bannerrotation").setAttribute("src",aBanners[i].src);
  document.getElementById("bannerlink").setAttribute("href",aBanners[i].href);

  i = ++i % aBanners.length;

  window.setTimeout("bannerRotate("+i+")",iBannerDelay);

}

bannerRotate(0);
</script>
Avatar billede w13 Novice
05. oktober 2008 - 12:31 #4
Hov, sådan her:

<a id="bannerlink" target="_blank">
  <img id="bannerrotation">
</a>

<script type="text/javascript">
var aBanners = [
  {"src" : "billede1.jpg", "href" : "http://www.google.com"},
  {"src" : "billede2.jpg", "href" : "http://www.eksperten.dk"},
  {"src" : "billede3.jpg", "href" : "http://www.facebook.com"}
];

var iBannerDelay = 2000; // angives i milisekunder

function bannerRotate(i){

  document.getElementById("bannerrotation").setAttribute("src",aBanners[i].src);
  document.getElementById("bannerlink").setAttribute("href",aBanners[i].href);

  i = ++i % aBanners.length;

  window.setTimeout("bannerRotate("+i+")",iBannerDelay);

}

bannerRotate(0);
</script>
Avatar billede roenving Novice
06. oktober 2008 - 16:12 #5
-- og forskelligt antal gange kan du f.eks. finde i: http://www.eksperten.dk/spm/628222 ...

-- hvis du have visningerne i forskellig tid, kan tiden (ligesom i linket !-) sættes på som ekstra parameter og så bruges i stedet for den statiske iBannerDelay i w13s eksempel !-)
Avatar billede w13 Novice
06. oktober 2008 - 16:22 #6
Dynamisk tid for de forskellige bannere kan, som Roenving beskriver, laves således:

<a id="bannerlink" target="_blank">
  <img id="bannerrotation">
</a>

<script type="text/javascript">
var aBanners = [
  {"src" : "billede1.jpg", "href" : "http://www.google.com", "delay" : 1000},
  {"src" : "billede2.jpg", "href" : "http://www.eksperten.dk", "delay" : 5000},
  {"src" : "billede3.jpg", "href" : "http://www.facebook.com"}
];

var iBannerDelay = 2000; // standard - angives i milisekunder

function bannerRotate(i){

  document.getElementById("bannerrotation").setAttribute("src",aBanners[i].src);
  document.getElementById("bannerlink").setAttribute("href",aBanners[i].href);

  i = ++i % aBanners.length;

  window.setTimeout("bannerRotate("+i+")",(aBanners[i].delay?aBanners[i]:iBannerDelay));

}

bannerRotate(0);
</script>

Så burde den bruge delay, hvis det er angivet, og ellers falde tilbage på iBannerDelay.
Avatar billede w13 Novice
06. oktober 2008 - 16:22 #7
Hov, følgende:

window.setTimeout("bannerRotate("+i+")",(aBanners[i].delay?aBanners[i]:iBannerDelay));

skulle være:

window.setTimeout("bannerRotate("+i+")",(aBanners[i].delay?aBanners[i].delay:iBannerDelay));
Avatar billede nph12 Nybegynder
06. oktober 2008 - 17:37 #8
Hej w13
Koden er noget for avanceret til jeg forstår den.

<body onLoad="java script:SkriftBanner()">

<script type="text/javascript">

var Banner = new Array():
Banner[0] = "sti til banner" <--hvordan angiver jeg, hvor lang tid banner skal vises?
Banner[1] = "sti til banner"
Banner[2] = "sti til banner"

function SkiftBanner() {

Hvordan gennemløber jeg array´et?
}

</script>

</body>
Avatar billede w13 Novice
06. oktober 2008 - 17:43 #9
Nåå, ok. Jeg vidste ikke, du ville lære at lave det. Men det er jo rigtig godt. =)

Du kan ikke bare bruge en for-løkke, for du vil jo have, at hvert billede skal vises i noget tid.

Til formålet skal du indsætte:

window.setTimeout("SkiftBanner()",2000);

nederst i SkiftBanner-funktionen. Denne linje vil køre funktionen SkiftBanner igen efter 2000 ms. (2 sek.).

I øvrigt bør:

<body onLoad="java script:SkriftBanner()">

bare være:

<body onload="SkriftBanner()">

da der som standard skrives JavaScript i en onload, så det behøver du ikke fortælle den med "java script:".
Avatar billede nph12 Nybegynder
06. oktober 2008 - 21:51 #10
OK. Så kommer koden til at se sådan ud:

<script type="text/javascript">

Banner = new Array();
Banner[0] = "sti til banner"
Banner[1] = "sti til banner"
Banner[2] = "sti til banner"

</head>

<body onload="SkriftBanner()">

function SkriftBanner(){

window.setTimeout("SkiftBanner()",2000);

}

</script>

</body>

Hvordan laver jeg gennemløb af array´et? Hvis jeg ikke skal bruge en for-løkker, så jeg bruge en while løkke?

Kan man ikke angive i array´et, hvor lang tid banneren skal vises? Hedder det så et dobbelt array eller hvad?
Avatar billede w13 Novice
06. oktober 2008 - 21:57 #11
Hvis du angiver flere ting i array'et, bliver det et såkaldt multidimensionalt array.

En anden måde at gøre det på, er at lave et såkaldt associativt array, sådan her:

Banner[0] = {"src" : "sti til banner", "time" : 3000};
Banner[1] = {"src" : "sti til banner", "time" : 2000};
Banner[2] = {"src" : "sti til banner", "time" : 1000};

Så kan du f.eks. hente src for banner[0] med:

banner[0].src

og f.eks. time for banner[2] med:

banner[2].time
Avatar billede w13 Novice
06. oktober 2008 - 22:01 #12
Og nej, hvis du laver en løkke i din funktion - både for og while - vil den bare løbe alle billederne igennem lynhurtigt og du vil ikke kunne nå at se det. Derfor gør vi det, at din funktion viser første billede første gang den bliver kaldt. Den gemmer at den er ved første billede, så vi kan aflæse det, når næste billede skal vises.

F.eks.:

<script type="text/javascript">

Banner = [];
Banner[0] = {"src" : "sti til banner", "time" : 3000};
Banner[1] = {"src" : "sti til banner", "time" : 2000};
Banner[2] = {"src" : "sti til banner", "time" : 1000};

var BilledNr = 0;

function SkriftBanner(){

  alert(BilledNr);

  BilledNr = BilledNr + 1;

  window.setTimeout("SkiftBanner()",2000);

}
</script>

<body onload="SkriftBanner()">

Denne kode vil lægge én til BilledNr, hver gang den køres og alerte BilledNr, så du kan se det.

Bemærk i øvrigt, at jeg bare skriver [] i stedet for new Array().
Avatar billede nph12 Nybegynder
06. oktober 2008 - 22:03 #13
OK. Jeg tror bare, at jeg holder mig til at angive sti i array´et.

Hvad skal jeg mere tilfølge til kode fra 06/10-2008 21:51:43?
Avatar billede w13 Novice
06. oktober 2008 - 22:05 #14
Hvis du gør sådan her, skulle det være fint:

<head>

<script type="text/javascript">

Banner = [];
Banner[0] = "sti til banner";
Banner[1] = "sti til banner";
Banner[2] = "sti til banner";

var BilledNr = 0;

function SkriftBanner(){

  document.getElementById("banner").setAttribute("src",Banner[BannerNr]);

  BilledNr = BilledNr + 1;

  if (BilledNr == Banner.length)
    BilledNr = 0;

  window.setTimeout("SkiftBanner()",2000);

}
</script>

</head>

<body onload="SkriftBanner()">
Avatar billede w13 Novice
06. oktober 2008 - 22:07 #15
Og så skal du have dette i body, hvor bannerne skal vises:

<img id="banner">

Forklaring til koden:
___________________

Denne linje sætter billedet ind i banneret:
document.getElementById("banner").setAttribute("src",Banner[BannerNr]);

Og denne linje lægger én til bannernr.:
BilledNr = BilledNr + 1;

Og denne nulstiller BilledNr, når sidste billede er nået:
  if (BilledNr == Banner.length)
    BilledNr = 0;
Avatar billede nph12 Nybegynder
07. oktober 2008 - 18:44 #16
Jeg kan ikke få koden til at virke. Hvordan skal hele koden se ud?
Avatar billede w13 Novice
07. oktober 2008 - 20:31 #17
<html>
<head>

<head>

<script type="text/javascript">

Banner = [];
Banner[0] = "sti til banner";
Banner[1] = "sti til banner";
Banner[2] = "sti til banner";

var BilledNr = 0;

function SkriftBanner(){

  document.getElementById("banner").setAttribute("src",Banner[BannerNr]);

  BilledNr = BilledNr + 1;

  if (BilledNr == Banner.length)
    BilledNr = 0;

  window.setTimeout("SkiftBanner()",2000);

}
</script>

</head>

<body onload="SkriftBanner()">

<img id="banner">

</body>
</html>

Men kommer der en fejlmeddelelse?
Avatar billede nph12 Nybegynder
07. oktober 2008 - 21:17 #18
Linje 17
Tegn 3
Fejl 'BannerNr' er ikke defineret
Avatar billede w13 Novice
07. oktober 2008 - 23:03 #19
BannerNr skal bare rettes til BilledNr
Avatar billede nph12 Nybegynder
08. oktober 2008 - 10:27 #20
Nu virker det:-)

Jeg kom lige i tænke om en anden ting. Vil man i stedet for banner kunne lave en webside rotation? Altså et Window som skifter mellem et par websider.
Avatar billede roenving Novice
08. oktober 2008 - 10:39 #21
-- til det kan du bruge window.open(url,"StatiskNavn"), hvor StatiskNavn bruges igen og igen, så vil urlen komme i det samme browservindue !-)
Avatar billede nph12 Nybegynder
08. oktober 2008 - 22:43 #22
window.open åbner et nyt browser vindue for hver url i array´et. Hvordan får jeg vist hver url i array i samme browser vindue?
Avatar billede w13 Novice
08. oktober 2008 - 22:49 #23
Du gør bare sådan her:

win = window.open(url,"win","");
Avatar billede roenving Novice
08. oktober 2008 - 23:42 #24
StatiskNavn skal bruges _hver_ gang !-)

-- 'win' er måske ikke det heldigste, men burde ikke umiddelbart skabe problemer !o]
Avatar billede nph12 Nybegynder
08. oktober 2008 - 23:49 #25
Jeg synes ikke helt det kører som jeg vil. Scriptet kører i et browser vindue og åbner et nyt. Kan det ikke køre i samme browser vindue?

Scriptet viser kun to af de tre url. Hvad skal jeg gøre for at scriptet kører som jeg vil?

<html>
<head>

<head>

<script type="text/javascript">

Url = [];
Url[0] = "http://www.dr.dk";
Url[1] = "http://www.tv2.dk";
Url[2] = "http://www.tv3.dk";


var i = 0;

function skiftUrl(){

 
  if (i == Url.length)
    i = 0;
 
  win = window.open(Url[i],"win","");

  i = i + 1;
 
  window.setTimeout("skiftUrl()",5000);

}

</script>

</head>

<body onLoad="skiftUrl()">


</body>
</html>
Avatar billede roenving Novice
09. oktober 2008 - 00:13 #26
Mon ikke bare tv3s side er længe om at loade, anden gang vises den zq fint hos mig, tredie gang kan jeg endda nå at læse i den, før dr kommer igen !-)
Avatar billede nph12 Nybegynder
09. oktober 2008 - 07:58 #27
Siderne bliver også vist fint nok hos mig nu. Scriptet kører i et browser vindue og åbner et andet til at vise de forskellige websider. Kan man ikke køre det hele i et browser vindue? Hvordan gør jeg det?

Kan man samle disse to linjer til en?

  win = window.open(Url[i],"win","");
  window.setTimeout("skiftUrl()",5000);
Avatar billede roenving Novice
09. oktober 2008 - 09:07 #28
Nej du kan ikke lave det i eet browser-vindue, for de andre sider stjæler jo hele vinduet, så din kode er væk ...

-- og nej, den kan jeg ikke forestille mig, at du kan samle, for du skal både iterere gennem urlerne og skifte kald ...
Avatar billede nph12 Nybegynder
09. oktober 2008 - 17:51 #29
OK. Mange tak for hjælpen. roenving: opret et svar, hvis du vil have point
Avatar billede nph12 Nybegynder
09. oktober 2008 - 18:09 #30
Kan man gøre pilen i browseren inaktiv, så pilen kommer frem igen, når man bruger musen?
Avatar billede nph12 Nybegynder
10. oktober 2008 - 07:35 #31
Hvordan fjerne jeg scrollbar på fuldskæmvisning? Jeg skal jo bruge disse to kommandoer, men jeg kan kun få en af den til at virke af gangen selvom jeg har tilføjet dem begge.

scrollbars=no
fullscreen=yes
Avatar billede roenving Novice
10. oktober 2008 - 08:28 #32
fullscreen udelukker anvendelsen af andre ...

-- men i dit dokument kan du fjerne dem:

<style type="tex/css">
html,body{margin:0;padding:0;overflow:hidden;}

/* ... */
</style>

-- els velbekomme '-)
Avatar billede nph12 Nybegynder
10. oktober 2008 - 22:20 #33
Hmm, det kan jeg ikke få til at virke. Jeg skal vel bare tilføje det til koden fra 08/10-2008 23:49:33
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
24/0417:35 Kan ikke resette PC med Windows 8.1 Af TTA i Office & Kontorpakker
24/0413:33 Lukning af Microsoftkonto Af ErikHg i Windows
23/0416:10 Bat file. Af johnnylassen i Andet programmering
23/0410:28 “Signe” Svindel omtalt i medier Af nu_igen i Mobiltelefoner
22/0420:59 RAID controller virker ikke ved tilslutning af alle 4 harddiske Af Strawberry i Andet hardware
White papers
Flere white papers »