Søg
Avatar billede mboesen Novice
18. marts 2004 - 15:28 Der er 21 kommentarer og
1 løsning

Forbedring af kode - Slideshow

Hej

Jeg har nedenstående kode på min hjemmeside hvor den for tiden har 40 billeder at skifte mellem. Det er noget kode som jeg har fået på dynamicdrive.com og fået lidt hjælp til at tilpasse den. Det er meningen at den skal tage et tilfældigt billede hver gang og det gør den tildels også. Dog virker det som om det den ofte kører i ring med 4-5 billeder og så hopper videre med andre billeder. Nogle gange kommer det samme billede igen efter kun et andet billedet. Er der noget man kan forbedre, så den skifter billedet endnu mere tilfældigt. Alternativt at den ikke tager det samme billedet indenfor 10 billeder eller lign?!

Jeg vedlægger koden, men I er også velkommen til at tage et kig på www.stockit.dk og selv se hvordan den kører. Så får man en bedre ide om hvor ofte/hurtigt det samme billede kommer igen:

koden:
<script language="JavaScript1.2">

//Fade-in image slideshow- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var slideshow_width='200px'; //SET IMAGE WIDTH
var slideshow_height='300px'; //SET IMAGE HEIGHT
var pause=3000; //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array();

//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]="images/menu_billeder/1.jpg"
fadeimages[1]="images/menu_billeder/2.jpg"
fadeimages[2]="images/menu_billeder/3.jpg"
fadeimages[3]="images/menu_billeder/4.jpg"
fadeimages[4]="images/menu_billeder/5.jpg"
fadeimages[5]="images/menu_billeder/6.jpg"
fadeimages[6]="images/menu_billeder/7.jpg"
fadeimages[7]="images/menu_billeder/8.jpg"
fadeimages[8]="images/menu_billeder/9.jpg"
fadeimages[9]="images/menu_billeder/10.jpg"
fadeimages[10]="images/menu_billeder/11.jpg"
fadeimages[11]="images/menu_billeder/12.jpg"
fadeimages[12]="images/menu_billeder/13.jpg"
fadeimages[13]="images/menu_billeder/14.jpg"
fadeimages[14]="images/menu_billeder/15.jpg"
fadeimages[15]="images/menu_billeder/16.jpg"
fadeimages[16]="images/menu_billeder/17.jpg"
fadeimages[17]="images/menu_billeder/18.jpg"
fadeimages[18]="images/menu_billeder/19.jpg"
fadeimages[19]="images/menu_billeder/20.jpg"
fadeimages[20]="images/menu_billeder/21.jpg"
fadeimages[21]="images/menu_billeder/22.jpg"
fadeimages[22]="images/menu_billeder/23.jpg"
fadeimages[23]="images/menu_billeder/24.jpg"
fadeimages[24]="images/menu_billeder/25.jpg"
fadeimages[25]="images/menu_billeder/26.jpg"
fadeimages[26]="images/menu_billeder/27.jpg"
fadeimages[27]="images/menu_billeder/28.jpg"
fadeimages[28]="images/menu_billeder/29.jpg"
fadeimages[29]="images/menu_billeder/30.jpg"
fadeimages[30]="images/menu_billeder/31.jpg"
fadeimages[31]="images/menu_billeder/32.jpg"
fadeimages[32]="images/menu_billeder/33.jpg"
fadeimages[33]="images/menu_billeder/34.jpg"
fadeimages[34]="images/menu_billeder/35.jpg"
fadeimages[35]="images/menu_billeder/36.jpg"
fadeimages[36]="images/menu_billeder/37.jpg"
fadeimages[37]="images/menu_billeder/38.jpg"
fadeimages[38]="images/menu_billeder/39.jpg"
fadeimages[39]="images/menu_billeder/40.jpg"

////NO need to edit beyond here/////////////
var preloadedimages=new Array();
   
    for (p=0;p<fadeimages.length;p++){
        preloadedimages[p]=new Image();
        preloadedimages[p].src=fadeimages[p];
        }

    var ie4=document.all;
    var dom=document.getElementById;

    if (ie4||dom)
        document.write('<div style=" position:relative;width:'+slideshow_width+';height :'+slideshow_height+';overflow:hidden"><div id="canvas0" style=" position:absolute;width:'+slideshow_width+';height    :'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style=" position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;left:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>');
    else
        document.write('<img name="defaultslide" src="'+fadeimages[0]+'">');

    var curpos=10;
    var degree=10;
    var curcanvas="canvas0";
    var curimageindex=0;
    var curimageindex=getUniqueNumber();
    var nextimageindex=getUniqueNumber();


    function fadepic(){
        if (curpos<100){
            curpos+=10;
            if (tempobj.filters)
                tempobj.filters.alpha.opacity=curpos;
            else if (tempobj.style.MozOpacity)
                tempobj.style.MozOpacity=curpos/100;
        }
        else{
            clearInterval(dropslide);
            nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1";
            tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas);
            tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">';
            nextimageindex=getUniqueNumber();
            setTimeout("rotateimage()",pause);
        }
    }

    function rotateimage(){
        if (ie4||dom){
            resetit(curcanvas);
            var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas);
            crossobj.style.zIndex++;
            var temp='setInterval("fadepic()",50)';
            dropslide=eval(temp);
            curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0";
        }
        else
            document.images.defaultslide.src=fadeimages[curimageindex];
       
        curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0;

    }

    function randomIndex(){
        var intHighest = fadeimages.length-1;
        var intLowest = 0;
        var num;

        do {
            num = Math.random();
            num = num*intHighest;
            num = Math.round(num);
            } while ((num>intHighest) || (num<intLowest));

        return num;
    }

    function getUniqueNumber(){
        var num;

        do {
            num = randomIndex();
            } while (num == curimageindex);

        return num;
    }

    function resetit(what){
        curpos=10;
        var crossobj=ie4? eval("document.all."+what) : document.getElementById(what);
        if (crossobj.filters)
            crossobj.filters.alpha.opacity=curpos;
        else if (crossobj.style.MozOpacity)
            crossobj.style.MozOpacity=curpos/100;
    }

    function startit(){
        var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas);
        crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">';
        rotateimage();
    }

    if (ie4||dom)
        window.onload=startit;
    else
        setInterval("rotateimage()",pause);

</script>
Avatar billede helle_fred Nybegynder
18. marts 2004 - 18:05 #1
Så vidt jeg kan se er det faktisk helt tilfældigt, hvilket billede, der bliver det næste - men måske ville det virke bedre, hvis udtrækket var "uden tilbagelægning" - dvs. at du får ændret scriptet, så billeder ikke gentages før hele sættet har været kørt igennem.

Der er dog én detalje i dit script, som jeg vil foreslå en forbedring af, og det er den lange indlæsning af billedfilnavne til dit array - det kan man skrive noget kortere, og du kan erstatte dine 40 linjer med følgende to::

for(i=0;i<40;i++)
fadeimages[i]="images/menu_billeder/"+i+".jpg"
Avatar billede roenving Novice
19. marts 2004 - 02:36 #2
>>helle_fred

Tjah, jeg ville jo nok undgå at ændre i filnavnene ved at:

for(i=0;40>i;i++)fadeimages[i]="images/menu_billeder/"+(i+1)+".jpg"

-- og jeg ville nok tage udgangspunkt i min fade-maskine på: http://roenving.users.whitehat.dk/WD5Opacity.html, og så oprette et array af den nødvendige længde til at sikre en unik-hed ...
Avatar billede mboesen Novice
19. marts 2004 - 08:22 #3
Hej Helle

Det er lige netop det jeg søger! At billederne "ikke tages tilbage"!

Har du mulighed for at kopier min kode og sætte dine (og måske roevings - uden at vide hvad forskellen er) ændringer ind, så jeg ikke får lavet rod i det, så vil jeg være en meget glad mand ;-)

På forhånd tak

Michael
Avatar billede helle_fred Nybegynder
19. marts 2004 - 09:04 #4
Det er Roevings kode, der er den rigtige - starter med at læse billedet "1.jpg" ind, mens jeg kom til at starte med "0.jpg" :-(

Det er ikke nogen let sag at omkode dit script, så billederne ikke gentages før hele puljen er vist!
Avatar billede mboesen Novice
19. marts 2004 - 09:19 #5
OK, så må jeg vist droppe den indtil videre, men tak for den anden del af koden!
Avatar billede helle_fred Nybegynder
19. marts 2004 - 09:21 #6
-måske roenving kan hjælpe dig - han har en ide.
Avatar billede grunken Nybegynder
19. marts 2004 - 14:27 #7
Er det ikke bare at :

blande indholdet af array't, køre det "nye" array igennem, for derefter at blande igen ? :o)

Den kan jeg da vist hurtigt skrue sammen hvis det er :o)

men pånær det mboesen, er du så overhovedet sikker på at folk når at se så mange billeder ?
Avatar billede helle_fred Nybegynder
19. marts 2004 - 14:31 #8
grunken> ja, det er da klart, at det er sådan man skal gøre!
Avatar billede roenving Novice
19. marts 2004 - 14:48 #9
Har du en lille smart blande-maskine, nick ?-)
Avatar billede grunken Nybegynder
19. marts 2004 - 15:01 #10
Jeg skal lige ned og handle, så skal jeg gerne lave forsøget :o)

Men hvis i andre er helt vilde, så når jeg det nok ikke

Jes blandemaskine og blandemaskine :o)
du kan jo se her hvor jeg blander et array 100% tilfældigt :o)

http://www.eksperten.dk/spm/462082

Princippet er det samme, der skal bare lidt fade på :o)
Avatar billede roenving Novice
19. marts 2004 - 16:31 #11
Jeg havde ikke en mængde billeder, så foreløbig er den bare testet med to billeder på IE !-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<title>Fade slideshow</title>

<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/478961">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript" language="JavaScript1.2">
var slideshow_width='200px'; //SET IMAGE WIDTH
var slideshow_height='300px'; //SET IMAGE HEIGHT
var pause=3000; //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var fadeimages=new Array();

for(i=0;40>i;i++)fadeimages[i]="images/menu_billeder/"+(i+1)+".jpg"
//fadeimages[0]="../billede.jpg";
//fadeimages[1]="../eksperten_logo_new.gif";

var slidelength = fadeimages.length,curcanvas,curimageindex;
var preloadedimages=new Array();
  for (p=0;slidelength>p;p++){
    preloadedimages[p]=new Image();
    preloadedimages[p].src=fadeimages[p];
  }

function shuffleArray(a) {
var t=s=0;
  for(var i=0;a.length>i;i++){
  t = Math.floor(Math.random()*a.length);
  s = a[i];
  a[i] = a[t] ;
  a[t] = s;
  }
return a;
}
var ix = new Array();
for(i=0;slidelength>i;i++)ix[i]=i;
ix = shuffleArray(ix);

var OpC = new Array();
var ie = (document.all)?true:false;
var moz = (navigator.userAgent.indexOf("Gecko")>-1)
function startOpChange(elm,end,tim){
  if(!ie&&!moz)return;
  var idx = OpC.length;
    for(var i=0;idx>i;i++){
        if(OpC[i][0]==elm){
          clearInterval(OpC[i][4]);
            idx = i;
            break;
        }
        OpC[idx] = new Array();
    }
  if(idx==0)OpC[idx] = new Array();
   
    if(ie)actOp=elm.filters.alpha.opacity;
    else actOp=Math.round((elm.style.MozOpacity*100));
  if (actOp!=end){
    OpC[idx][0]=elm;
    OpC[idx][1]=actOp;
    OpC[idx][2]=end;
    OpC[idx][3]=(end>actOp)?1:-1;
    var delayTime = Math.floor((tim*1000)/Math.abs((actOp-end)));
    OpC[idx][4]=setInterval("opChange("+idx+")",delayTime);
  }
}
function opChange(idx){
  OpC[idx][1]+=OpC[idx][3];
  if (ie)OpC[idx][0].filters.alpha.opacity=OpC[idx][1];
  else OpC[idx][0].style.MozOpacity=Math.min(0.9999,OpC[idx][1]/100);
  if (OpC[idx][1]==OpC[idx][2]){
    clearInterval(OpC[idx][4]);
    return;
  }
}

function initSlide(){
  var c = document.getElementById('slidecontainer');
  with(c.style){
    position='relative';
    overflow='hidden';
    width=slideshow_width;
    height=slideshow_height;
  }
  if (ie||moz){
    for(i=0;2>i;i++){
      var im = document.createElement('IMG');
      c.appendChild(im);
      with(im.style){
        position='absolute';
        top=left='0px';
        width=slideshow_width;
        height=slideshow_height;
        filter='alpha(opacity=5)';
        MozOpacity='0.05';
      }
      im.id = 'canvas'+i;
    }
    startOpChange(im,100,pause/10000);
    setInterval('nextSlide()',pause);
  }else{
    var im = document.createElement('IMG');
    c.appendChild(im);
    with(im.style){
      position='absolute';
      top=left='0px';
      width=slideshow_width;
      height=slideshow_height;
    }
    im.id = "canvas"
    im.src = fadeimages[0];
  }
  curcanvas="canvas1";
  curimageindex=0;
}

function nextSlide(){
  startOpChange(document.getElementById(curcanvas),5,pause/10000);
  curcanvas = 'canvas' + ((curcanvas=='canvas0')?1:0);
  var im = document.getElementById(curcanvas);
  if(curimageindex+1==slidelength)ix = shuffleArray(ix);
  curimageindex = ++curimageindex%slidelength;
  im.src = fadeimages[ix[curimageindex]];
  startOpChange(im,100,pause/10000); 
}

function rotateimage(){
  var im = document.getElementById('canvas');
  curimageindex = ++curimageindex%slidelength;
  im.src = fadeimages[index[curimageindex]];
}

    if (ie||moz)
        window.onload=initSlide;
    else
        setInterval("rotateimage()",pause);

</script>
</head>

<body>
  <div id="slidecontainer"></div>
</body>
</html>
Avatar billede roenving Novice
19. marts 2004 - 16:38 #12
-- og Mozilla æder den selvfølgelig også, så alle browsere med Gecko som maskine og IE på Windows skulle køre den korrekt, men det er altså ikke gennemtestet ...

(andre browsere skulle bare udskifte billederne !-)

Ideen er, at den gennemløber alle billeder i arrayet i en tilfældig orden, derefter laver den en ny tilfældig orden, så der kan forekomme tilfælde, hvor det sidste i den gamle orden er det samme som det første i den næste orden, men aldrig noget som ligner gentagelser !-)

-- og jeg så jo lige en brøler i rotateimage-funktionen:

function rotateimage(){
  var im = document.getElementById('canvas');
  if(curimageindex+1==slidelength)ix = shuffleArray(ix);
  curimageindex = ++curimageindex%slidelength;
  im.src = fadeimages[ix[curimageindex]];
}
Avatar billede helle_fred Nybegynder
22. marts 2004 - 09:39 #13
roenving: din shuffleArray er rimelig fiks!
Avatar billede roenving Novice
22. marts 2004 - 21:43 #14
>>helle_fred

Den har jeg jo nuppet fra grunken:

grunken 19/03-2004 15:01:37 http://www.eksperten.dk/spm/462082

-- måske liige en enkelt tilpasning !-)

-- og den er præcis ganske fiks ...
Avatar billede mboesen Novice
23. marts 2004 - 10:26 #15
Hej med jer

Undskyld jeg ikke lige har fået vendt tilbage, men jeg har haft travlt i weekenden og nu ligger jeg syg. Jeg skal nok lige tage mig sammen og få ordnet min kode og uddele nogle point!
Avatar billede mboesen Novice
24. marts 2004 - 19:52 #16
Tusind tak for hjælpen - det ser ud til at fungere perfekt!

Roenving - lægger du et svar, så du kan få nogle point!
Avatar billede roenving Novice
24. marts 2004 - 22:46 #17
Velbekomme '-)
Avatar billede mboesen Novice
25. marts 2004 - 15:07 #18
roenving - jeg har lige testet din kode her på arbejdet.

Jeg synes at billederne rotere ekstrem hurtigt, så et billedet nærmest ikke kommer frem før det næste starter. Er det noget jeg ændre i PAUSE? Eller har det noget med preload af billeder at gøre, net-hastighed, rotationsfunktionen eller hvad?
Avatar billede roenving Novice
25. marts 2004 - 15:24 #19
Det har præcis noget med pause at gøre, før transitionen tager ca. 1 sekund, så du vil se hvert billede klart i omkring 2 sekunder, når pause er sat til 3000 ...

var pause=10000; //SET PAUSE BETWEEN SLIDE (10000=10 seconds)
Avatar billede mboesen Novice
25. marts 2004 - 18:05 #20
Tak - jeg prøver at ændre den lidt - det går lige hurtigt nok ;-)
Avatar billede mboesen Novice
30. marts 2004 - 19:39 #21
Undskyld - jeg troede at jeg havde givet dig point. Jeg prøver at acceptere igen!
Avatar billede roenving Novice
30. marts 2004 - 19:48 #22
-- og tak for points ;~}
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
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
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
I går 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
11/0813:21 ms Forms Af leahcim i Andet software
White papers
Flere white papers »