Just nu i M3-nätverket
Gå till innehåll
Eforum är stängt för nya inlägg och svar sedan 20 juni 2022. Klicka för att läsa vad som hände och om alternativ.

Bildspel

Hemmagossen

Startad av Hemmagossen,
i Webbutveckling

Rekommendera Poster

Hemmagossen

Hemmagossen

Postad
Postad

Jag håller på att göra ett bildspel i Javascript, och till den vill jag ha en knapp som pausar om man bildspelet är igång, och fortsätter om bildspelet är pausat.

 

Funktionen ser ut så här:

 

function knapp() {

if (t = setTimeout('runSlideShow()', slideShowSpeed)) {

clearTimeout(t);

}

 

else {

setTimeout('runSlideShow()', slideShowSpeed);

}

}

 

 

Innan hade två knappar (utan if-sats) och då fungerade det, men jag tycker att det blir snyggare om jag bara har en knapp.

Snälla, vad gör jag för fel?

 

Länk till kommentar
Dela på andra webbplatser
Micke_skane

Micke_skane

Postad
Postad

Lite funderingar ang din kod:

 

Vet du vad setTimeout() innebär?

Var lägger du in ett värde i variabeln t?

 

När du funderat lite på frågorna kan du kika på ex jag gjorde:

[log]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="sv" xml:lang="sv">
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Language" content="sv" />
<title>Untitled</title>
<script type="text/javascript">
var i=0;
slideShowSpeed=100;
TmpBln=false;
function knapp() {
if (TmpBln) {
	clearInterval(t);
	TmpBln=false;
	return "Start";
}
else {
	t=setInterval("runSlideShow()",slideShowSpeed);
	TmpBln=true;
	return "Stopp";
} 
}
function runSlideShow() {
i++;
document.getElementById("siffra").value=i;
}
</script>
</head>

<body>
<input type="Text" id="siffra" /><br />
<input type="Button" onclick="this.value=knapp();" value="Start" />
</body>
</html>

[/log]

[inlägget ändrat 2008-10-17 17:48:56 av Micke_skane]

Länk till kommentar
Dela på andra webbplatser
Hemmagossen

Hemmagossen

Postad
  • Trådskapare
Postad

Hela koden ser ut så här:

<head>

<script language="JavaScript">
<!--


var slideShowSpeed = 4000;

var crossFadeDuration = 3;
rugbynollsju = new Array();
rugbynollsju[0]='materialare.GIF';
rugbynollsju[1]='oljefatansvarig.gif';
rugbynollsju[2]='ordforande.gif';
rugbynollsju[3]='taktansvarig.gif';
rugbynollsju[4]='vice.gif';
var t
var j = 0
var p = rugbynollsju.length
var preLoad = new Array()
for (i = 0; i < p; i++){
  preLoad[i] = new Image()
  preLoad[i].src = rugbynollsju[i]
}

function runSlideShow(){
  if (document.all){
     document.images.SlideShow.style.filter="blendTrans(duration=2)"
     document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
     document.images.SlideShow.filters.blendTrans.Apply()      
  }
  document.images.SlideShow.src = preLoad[j].src
  if (document.all){
     document.images.SlideShow.filters.blendTrans.Play()
  }
  j = j + 1
  if (j > (p-1)) j=0
  t = setTimeout('runSlideShow()', slideShowSpeed)
}

function knapp() {
if (t = setTimeout('runSlideShow()', slideShowSpeed)) {
	clearTimeout(t);
}

else {
setTimeout('runSlideShow()', slideShowSpeed);
} 
}

//-->
</script>

</head>

 

 

Jag är bara nybörjare i Javascript, och har fått en del hjälp med den här koden, men setTimeout() betyder är väl hur lång tid det tar innan funktion börjar, i det här fallet byts bilden efter 4000 millisekunder. t har jag lagt in ett värde för tidigare i skriptet som du ser.

 

 

Som jag skrev innan så är jag nybörjare, så jag förstår inte ditt skript. :S

Kan du förklara. (a)

 

[inlägget ändrat 2008-10-18 16:26:00 av Hemmagossen]

[inlägget ändrat 2008-10-18 16:26:40 av Hemmagossen]

Länk till kommentar
Dela på andra webbplatser
Anjuna Moon

Anjuna Moon

Postad
Postad

Ändra funktionen till

function knapp() {
  if (t != null)
  { 
clearTimeout(t);
       t=null;
  }
  else 
  {
t=setTimeout('runSlideShow()', slideShowSpeed);
  }
} 
}

 

Länk till kommentar
Dela på andra webbplatser
  • 2 veckor senare...
rrostt

rrostt

Postad
Postad

Och för att förklara varför det inte funkade innan och varför det funkar nu, snarare än bara få lösningen serverad på ett fat:

 

var v = setTimeout(f, t) gör så att funktionen f evalueras efter t millisekunder.

värdet v som setTimeout är en _handler_ för timern. den använder du för att kunna hantera timern - i det här stänga av den.

clearTimeout tar alltså en handler till en timer som argument och gör helt sonika så att funktionen f inte längre anropas efter att tiden t förlöpt.

 

I ditt exempel kör du if (t = setTimeout(...)) { ... }.

vad som händer är ekvivalent med:

 

t = setTimeout(...);

if (t) { clearTimeout(t); }

 

dvs, eftersom t alltid kommer va handlern till timern du precis satte igång, kommer t alltid evalueras till true. resultatet blir alltså att du startar timern, och sen stänger av timern direkt.

i det fungerande exemplet kollas det istället först om timern körs (dvs om din slideshow är igång) och avslutar isf timern (och sättern handlern till null). om timern inte körs (din slideshow är pausad) så startas timern igen.

 

Jag hoppas du läser förklaringen och inte lämnar forumet så fort du fick din kod fungerande :). Inte annat kanske någon annan får nytta av det.

I övriga ärenden kan jag dock rekommendera Google (http://www.google.com).

 

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

Gå till ämneslista


×
×
  • Skapa nytt...