Avatar billede andersasp Nybegynder
16. januar 2007 - 18:18 Der er 7 kommentarer og
1 løsning

Repeat af javascript billede funktion

Hejsa,

Jeg har fundet et javascript, som laver en cool effekt mellem 2 billeder.. Den virker rigtig godt med et billede. men nu vil jeg gerne lave den dynamisk med x antal billeder. hvordan er det lige man kan ændre det.. lige gyldigt hvad jeg gør er det kun et billede effekten vises på.. scriptet er her, hvor jeg bare manuelt har indsat 3 billeder????


----------------------------------------------------------
<html>
<head>
<title>pixel show</title>
<script language="JavaScript1.1">
<!--
var slidespeed=4000

var slideimages=new Array("1.jpg","1.jpg")

var imageholder=new Array()
var ie55=window.createPopup
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
window.location=slidelinks[whichlink]
}

//-->
</script>

</head>

<body>
<div align="center"><img src="1.jpg" name="slide1" width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" > <img src="2.jpg" name="slide2" width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" > <img src="3.jpg" name="slide3" width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" >
</div>
<p align="center">

<script language="JavaScript1.1">
<!--
var whichlink=0
var whichimage=0
var pixeldelay=(ie55)? document.images.slide1.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie55) document.images.slide1.filters[0].apply()
document.images.slide1.src=imageholder[whichimage].src
if (ie55) document.images.slide1.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+pixeldelay)
}
slideit()

//-->
</script>
</body>

</html>
Avatar billede crazysnap Seniormester
16. januar 2007 - 21:25 #1
Hej andersasp,

Jeg er ved at fixe dit script og har lige et par spørgsmål:

1) Der skal kun være et billede vist af gangen, ikke sandt? Så du har ét billede, efter noget tid morpher det over i billede nr 2, derefter over i nr 3 osv (op til x).

2) Skal der kunne være flere billeder med samme effekt ved siden af hinanden?


- Snap :)
Avatar billede crazysnap Seniormester
16. januar 2007 - 21:26 #2
hov manglede lige endnu et spørgsmål:

Skal man kunne klikke på et billede og redirectes til en ny side?


- Snap :)
Avatar billede andersasp Nybegynder
16. januar 2007 - 21:34 #3
Hejsa,

nej der skal ikke være noget link. Og jeg vil meget gerne have den samme effekt på x antal billeder.. det kan bare være det samme billede som den skifter mellem "var slideimages=new Array("1.jpg","1.jpg")" - da det også ser ret cool ud..

Jeg ved desværre meget lidt om javascript
Avatar billede crazysnap Seniormester
16. januar 2007 - 21:35 #4
ok perfekt!.. Der kommer en løsning snart! :)


- Snap
Avatar billede andersasp Nybegynder
16. januar 2007 - 21:46 #5
Super, glæder mig til at se hvordan du kringer den!! Vil helt vildt gerne forstå javascripts lidt bedre.. men det tager jo nok lige lidt tid :)
Avatar billede crazysnap Seniormester
16. januar 2007 - 22:27 #6
Hej andersasp,

Nu har jeg lavet et script som udfører den handling du ønsker (ved at redigere í dit). Du kan nu tilføje så mange <img> tags du har lyst til bare de bliver initialiseret fra onload event'en i body'en ud fra deres "id". Når de initialiseres specificeres der også samtidigt hvilke billeder der skal cirkuleres.
Hvis du har spørgsmål om hvordan du tilføjer flere billeder må du endelig skrive! Du skal ellers bare følge den struktur der er med de andre. :)


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

<html>
<head>
<title>pixel show</title>
<script type="text/javascript" language="javascript">
var arrImages = new Array();
var ie55 = window.createPopup;

//Variabel der bestemmer hvor hurtigt der skal skiftes mellem billederne
var slidespeed = 2000;


function initSlide(ctrlId, imagesArray)
{
    if(imagesArray == null || imagesArray.length == 0)
        return;

    var index = arrImages.length;
    arrImages[index] = imagesArray;
   
    slideit(index, 0, ctrlId);
}



function slideit(intIndex, intWhichImage, ctrlId)
{
    if (!document.images)
        return;
   
    var ctrl = document.getElementById(ctrlId);
   
    if (ie55)
        ctrl.filters[0].apply();
       
    ctrl.src = arrImages[intIndex][intWhichImage];
 
    if (ie55)
        ctrl.filters[0].play();
       
    intWhichImage = ( intWhichImage < arrImages[intIndex].length - 1 ) ? intWhichImage+1 : 0;
   
    var pixeldelay = (ie55) ? ctrl.filters[0].duration*1000 : 0;
   
    setTimeout("slideit(" + intIndex + ", " + intWhichImage + ", '" + ctrlId + "')", slidespeed + pixeldelay);
}

</script>

</head>

<body onload="initSlide('slide1', new Array('1.jpg', '2.jpg'));
              initSlide('slide2', new Array('1.jpg', '2.jpg', '3.jpg'));
              initSlide('slide3', new Array('1.jpg', '2.jpg'));">
             
        <div align="center">
                <img src="1.jpg" id="slide1" width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" />
                <img src="2.jpg" id="slide2"  width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" />
                <img src="3.jpg" id="slide3"  width="100" height="100" style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)" />
        </div>
<p align="center">
</body>

</html>



Håber det kan bruges! :)


Mvh.

- Snap
Avatar billede andersasp Nybegynder
17. januar 2007 - 09:09 #7
Super cool, det virker perfekt.. tusinde tak for hjælpen :)
Avatar billede crazysnap Seniormester
17. januar 2007 - 09:35 #8
Det lyder jo smukt, og det var så lidt! :)


Held og lykke med det og tak for pointene!


Mvh.

- Snap
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