Avatar billede jepjo Nybegynder
15. januar 2007 - 22:05 Der er 4 kommentarer og
1 løsning

divrotator med javascript

Hej alle,

Jeg står med en række lister der skal kunne rotere, dvs. vises på skift. Som udgangspunkt arbejder jeg i et CMS system der tillader at indsætte javascript og derfor mit valg.

Jeg tænkte at jeg kunne lave en række div'ere som vist nedenfor:

<div id="Members">
<div id="member1">
<div class="memberHeader">header 1</div>
<div class="memberPic">Billede 1</div>
<div class="memberInfo">
    Navn: navn 1<br />
    Firma: firma 1<br />
    Stilling: titel 1</div>
</div>
<div id="member2">
<div class="memberHeader">header 1</div>
<div class="memberPic">Billede 1</div>
<div class="memberInfo">
    Navn: navn 1<br />
    Firma: firma 1<br />
    Stilling: titel 1</div>
</div>
<div id="member3">
<div class="memberHeader">header 1</div>
<div class="memberPic">Billede 1</div>
<div class="memberInfo">
    Navn: navn 1<br />
    Firma: firma 1<br />
    Stilling: titel 1</div>
</div>

</div>

Det er DIV'erne med id member1, member2, member3 etc. der skal skifte.

Jeg havde forestillet mig at man nu kan sætte display propertyene ved skiftevis at sætte disse til "block" og "none".

Jeg har forsøgt mig med forskellige små scripts men har ikke fundet en løsning der virker.

1. hvordan definerer/identificerer jeg den enkelte div?
2. hvordan sætter jeg en pause mellem skiftene?
3. hvordan sætter jeg scriptet til at køre så længe jeg er på en bestemt side?

Har i en ide?

Mvh. Jesper
Avatar billede roenving Novice
16. januar 2007 - 00:29 #1
Den enkelte div får du fat i med:

document.getElementById("member1");

-- en pause får du ved at bruge setTimeout eller setInterval (i dette tilfælde er setInterval nok interessant !-)

-- netop setInterval vil fortsætte indtil det eksplicit stoppes ...

-- et eksempel kan være:

<script type="text/javascript">
var numMembers = actMember = 1;
window.onload = function(){
  while(document.getElementById("member"+numMembers))
    numMembers++;
  numMembers--;
  rotateDivs();
  setInterval("rotateDivs()",5*1000);//5 sekunder mellem skift
}
function rotateDivs(){
  if(actMember > numMembers)
    actMember = 1;
  for(i=1; numMembers >= i; i++)
    document.getElementById("member"+i).style.display = "none";
  document.getElementById("member"+actMember).style.display = "block";
  actMember++;
}
</script>

-- skrevet lige her og absolut utestet !-)
Avatar billede jepjo Nybegynder
16. januar 2007 - 08:49 #2
Tak roenving,

Det ser ud til at virke. Lige et spørgsmål til:

Er der i ovenstående script taget højde for browsertyper? så vidt jeg ved opfører style properties sig anderledes i f.eks. firefox???
Avatar billede roenving Novice
17. januar 2007 - 00:46 #3
setInterval er såvidt jeg husker først med i javascript 1.1 (øeh ca. 1995-1996), mens .getElementById først understøttes af IE5, Netscape 6, Mozilla 0, Firefox 0, og vist Opera 2 eller 3 ...

-- altså bør den virke på alle nutidens installerede browsere !-)
Avatar billede roenving Novice
17. januar 2007 - 00:46 #4
-- els velbekomme '-)
Avatar billede roenving Novice
22. januar 2007 - 17:37 #5
-- og tak for point ;~}
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