31. august 2005 - 17:33Der er
13 kommentarer og 1 løsning
Omskrivning af slideshow
Jeg har det her script, som laver et slideshow med bløde/fade overgange. Er det muligt at omskrive det, så billederne ikke fader ind over hinanden, men venter på at det forrige er fadet ud?
Sådan her: billede 1 toner frem billede 1 toner ud billede 2 toner frem billede 2 toner ud osv. osv.
Funktionen med, at scriptet starter forfra, når det sidste billede er fadet ud, skal selvfølgelig stadig være der.
- - - - - - - - - - - - - - - - - -
<script language="JavaScript1.2">
function reapply(){ setTimeout("slideit()",250) return true } window.onerror=reapply </script> <script language="JavaScript1.1"> <!-- var image1=new Image() image1.src="billede1.jpg" var image2=new Image() image2.src="billede2.jpg" var image3=new Image() image3.src="billede3.jpg" var image4=new Image() image4.src="billede4.jpg" //--> </script>
<body onLoad="slideit()">
<script> <!-- ////change number of images below var number_of_images=4 //change speed below (in seconds) var speed=6 var step=1 var whichimage=2 function slideit(){ if (!document.images) return if (document.all) slide.filters.blendTrans.apply() document.images.slide.src=eval("image"+step+".src") if (document.all) slide.filters.blendTrans.play() whichimage=step if (step<number_of_images) step++ else step=1 if (document.all) setTimeout("slideit()",speed*1000+3000) else setTimeout("slideit()",speed*1000) } function slidelink(){ if (whichimage==1) window.location="link1.htm" else if (whichimage==2) window.location="link2.htm" else if (whichimage==3) window.location="link3.htm" } //--> </script>
Indfør et blankt billede, imageBlank.jpg. Først fader du så mellem det nuværede billede og det blanke, derefter fader du endnu engang mellem det blanke og det nye:
function slideit() { if (!document.images) return
// Fade old image out. if (document.all) slide.filters.blendTrans.apply() document.images.slide.src = "imageBlank.jpg" if (document.all) slide.filters.blendTrans.play()
// Fade new image in. if (document.all) slide.filters.blendTrans.apply() document.images.slide.src = eval("image" + step + ".src") if (document.all) slide.filters.blendTrans.play()
whichimage = step
if (step < number_of_images) step++ else step = 1
if (document.all) setTimeout("slideit()", speed*1000+3000) else setTimeout("slideit()", speed*1000) }
hmmm... den opfører sig fuldstændig som det første script :s
-den fader billede 1 frem og derefter faeder den billede 2 henover... ideen var jo, at billede i skulle forsvinde helt, og først der skulle billede 2 begynde at fade frem
Problemet er, at billederne bliver fadet meeeget hurtigere ud, end det næste bliver fadet ind, så det ser ud som om at billedet bliver 'afbrudt' og det næste bliver så langsomt vist frem... så det ser ud som om det hakker :(
Den begynder simpelthen at fade det nye billede ind før at den har haft tid til at fade det gamle ud. Løsningen må være noget i stil med at vente 2000 ms (siden din duration er 2) før at det nye fades ind:
function slideit() { if (!document.images) return
// Fade old image out. FadeOut();
// Fade new image in. setTimeout("FadeIn(" + step + ")", 2000)
function FadeOut() { if (document.all) slide.filters.blendTrans.apply() document.images.slide.src = "start.gif" if (document.all) slide.filters.blendTrans.play() }
fincyion FadeIn(step) { if (document.all) slide.filters.blendTrans.apply() document.images.slide.src = eval("image" + step + ".src") if (document.all) slide.filters.blendTrans.play() }
Ja, det sidste havde jeg også tænkt på, men så gir det jo et problem med at "imageblank" kommer til at stå lige så lang tid som de "rigtige" billeder... kan man lave det så hver andet billede (det vil sige imageblank) har en kortere levetid end de "rigtige" billeder?
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.