Avatar billede rundt_om Nybegynder
31. august 2005 - 17:33 Der 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>

<img src="start.jpg" name="slide" border="0" style="filter:blendTrans(duration=2)">
Avatar billede nielle Nybegynder
31. august 2005 - 18:13 #1
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)
}
Avatar billede rundt_om Nybegynder
31. august 2005 - 18:34 #2
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
Avatar billede nielle Nybegynder
31. august 2005 - 19:08 #3
Har du et link hvor man kan se det i funktion?
Avatar billede rundt_om Nybegynder
31. august 2005 - 20:47 #4
jeg vrøvler... det virker ikke på samme måde.

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 :(

giver det mening?
Avatar billede nielle Nybegynder
31. august 2005 - 20:57 #5
Jeg vil stadig gerne se et link hvis det er muligt?
Avatar billede rundt_om Nybegynder
31. august 2005 - 21:27 #6
Here you go: http://www.chael.dk/test/test.asp

imageBlank er det sorte billede
Avatar billede nielle Nybegynder
31. august 2005 - 21:54 #7
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)

    whichimage = step

    if (step < number_of_images)
        step++
    else
        step = 1

    if (document.all)
        setTimeout("slideit()", speed*1000+3000 + 2000)
    else
        setTimeout("slideit()", speed*1000 + 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()
}
Avatar billede nielle Nybegynder
31. august 2005 - 21:57 #8
Et alternativ kunne vaære at udvide din billede serie på denne måde:

var image1=new Image()
image1.src="billede1.jpg"

var image2=new Image()
image2.src="imageBlank.jpg"

var image3=new Image()
image3.src="billede2.jpg"

var image4=new Image()
image4.src="imageBlank.jpg"

var image5=new Image()
image5.src="billede3.jpg"

var image6=new Image()
image6.src="imageBlank.jpg"

var image7=new Image()
image7.src="billede4.jpg"

var image8=new Image()
image8.src="imageBlank.jpg"
Avatar billede rundt_om Nybegynder
31. august 2005 - 22:00 #9
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?
Avatar billede nielle Nybegynder
31. august 2005 - 22:10 #10
Ikke med den sidste, men det sker faktisk i 31/08-2005 21:54:05 koden.
Avatar billede rundt_om Nybegynder
31. august 2005 - 22:13 #11
ja, men det virker ikke :) se linket igen
Avatar billede nielle Nybegynder
31. august 2005 - 22:17 #12
Ret lige mine trykfejl:

fincyion FadeIn(step)

- til:

function FadeIn(step)
Avatar billede rundt_om Nybegynder
31. august 2005 - 22:29 #13
haha... den havde jeg sgu heller ikke set :)

Det virker, så hvis du smider et svar, er der point på vej.

Tak for hjælpen!
Avatar billede nielle Nybegynder
31. august 2005 - 22:31 #14
Svar :^)
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