JavaScript automaattiseksi

Ensimmäiset kiitokset menivätkin väärään lokeroon, vastasin vahingossa itselleni. Jospa tällä kertaa onnistuisi, eli kiitos.

Toinen kysymys tuli heti mieleeni, kun en tuota JavaScriptiä ole ennen harrastanut:

Nyt automaattinen käynnistys toimii mutta miten saan tehtyä toiminnon joka suorittaa tuon function stop:in kun kaikki kuvat on käyty läpi, eli esimerkiksi silloin kun muuttujan num arvo on 12? Haluan sivun toimivan siis sillä tavalla että SlideShow aloitetaan automaattisesti kun sivulle tullaan mutta kuvat käydään läpi vain kertaalleen.

Samalla pääsisin eroon vasta huomaamastani ikävästä ominaisuudesta joka ilmenee kun "Aloita" tekstiä klikkaa useampaan kertaan...

Sivumaakari kirjoitti:

Ensimmäiset kiitokset menivätkin väärään lokeroon, vastasin vahingossa itselleni. Jospa tällä kertaa onnistuisi, eli kiitos.

Toinen kysymys tuli heti mieleeni, kun en tuota JavaScriptiä ole ennen harrastanut:

Nyt automaattinen käynnistys toimii mutta miten saan tehtyä toiminnon joka suorittaa tuon function stop:in kun kaikki kuvat on käyty läpi, eli esimerkiksi silloin kun muuttujan num arvo on 12? Haluan sivun toimivan siis sillä tavalla että SlideShow aloitetaan automaattisesti kun sivulle tullaan mutta kuvat käydään läpi vain kertaalleen.

Samalla pääsisin eroon vasta huomaamastani ikävästä ominaisuudesta joka ilmenee kun "Aloita" tekstiä klikkaa useampaan kertaan...

Täytyy kyllä myöntää, etten itsekään ole liiemmin JavaScriptin käyttöä harrastanut. Mutta kokeillaas.

Tällä hetkellähän slideshow-funktiossa num-muuttujan arvoa kasvatetaan yhdellä joka kerta, kun funktiota kutsutaan. Jos arvoksi tulee 4, silmukka pyöräytetään alkuun asettamalla num-muuttujan arvoksi 1. Siispä taaksepäin kelaamisen sijaan kutsutaan stop-funktiota ja lopetetaan kuvien vaihtaminen.

Diaesityksen koodista löytyy myös pieni ongelma. Jos sivu latautuu nopeasti, num-muuttujan arvoa kasvatetaan alkuarvostaan (= 1) seuraavaksi lähes saman tien. Tällöin käyttäjä ei välttämättä näe ensimmäistä kuvaa kuin vilaukselta. Tämän takia alkuarvoksi kannattaa asettaa mieluummin 0, jolloin jokainen kuva pysyy näytöllä vähintään sen 1500 millisekuntia (kuten koodissa on määrätty). Muuttujan arvohan suurenee ennen kuvan vaihtumista, joten img0-kuvaa ei yritetä missään vaiheessa esittää.

Lähdekoodi näyttää nyt tältä:


JavaScript

var num=0
img1 = new Image()
img1.src = "kuva1.jpg"
img2 = new Image()
img2.src = "kuva2.jpg"
img3 = new Image()
img3.src = "kuva3.jpg"

function slideshow()
{
num=num 1
if (num==4)
{ stop() }
else
{
document.mypic.src=eval("img" num ".src")
aika = self.setTimeout("slideshow()",1500)
}
}

function stop()
{
self.clearTimeout(aika);
}

UPDATE_5299066 kirjoitti:

Täytyy kyllä myöntää, etten itsekään ole liiemmin JavaScriptin käyttöä harrastanut. Mutta kokeillaas.

Tällä hetkellähän slideshow-funktiossa num-muuttujan arvoa kasvatetaan yhdellä joka kerta, kun funktiota kutsutaan. Jos arvoksi tulee 4, silmukka pyöräytetään alkuun asettamalla num-muuttujan arvoksi 1. Siispä taaksepäin kelaamisen sijaan kutsutaan stop-funktiota ja lopetetaan kuvien vaihtaminen.

Diaesityksen koodista löytyy myös pieni ongelma. Jos sivu latautuu nopeasti, num-muuttujan arvoa kasvatetaan alkuarvostaan (= 1) seuraavaksi lähes saman tien. Tällöin käyttäjä ei välttämättä näe ensimmäistä kuvaa kuin vilaukselta. Tämän takia alkuarvoksi kannattaa asettaa mieluummin 0, jolloin jokainen kuva pysyy näytöllä vähintään sen 1500 millisekuntia (kuten koodissa on määrätty). Muuttujan arvohan suurenee ennen kuvan vaihtumista, joten img0-kuvaa ei yritetä missään vaiheessa esittää.

Lähdekoodi näyttää nyt tältä:


JavaScript

var num=0
img1 = new Image()
img1.src = "kuva1.jpg"
img2 = new Image()
img2.src = "kuva2.jpg"
img3 = new Image()
img3.src = "kuva3.jpg"

function slideshow()
{
num=num 1
if (num==4)
{ stop() }
else
{
document.mypic.src=eval("img" num ".src")
aika = self.setTimeout("slideshow()",1500)
}
}

function stop()
{
self.clearTimeout(aika);
}

Jos haluat koodin hieman kätevämpään muotoon (ainakin omasta mielestäni), niin JavaScript-osuuden voisi tiivistää vaikkapa seuraavanlaiseksi:


var num = 0
kuvat = new Array()
kuvat[0] = "kuva1.jpg"
kuvat[1] = "kuva2.jpg"
kuvat[2] = "kuva3.jpg"

function slideshow()
{
   document.mypic.src = kuvat[num]
   if( num < kuvat.length)
      { self.setTimeout("slideshow()", 1500) }
}


Nyt esim. kuvatiedostojen nimet sijoitetaan taulukkoon, josta ne myöhemmin vuorollaan poimitaan. Tällä tavalla ei tarvitse luoda turhia Image-objekteja pelkkien tiedostonimien tallentamista varten.

Tosin kuten sanottua, en ole mikään JavaScript-ekspertti :)

UPDATE_5299066 kirjoitti:

Jos haluat koodin hieman kätevämpään muotoon (ainakin omasta mielestäni), niin JavaScript-osuuden voisi tiivistää vaikkapa seuraavanlaiseksi:


var num = 0
kuvat = new Array()
kuvat[0] = "kuva1.jpg"
kuvat[1] = "kuva2.jpg"
kuvat[2] = "kuva3.jpg"

function slideshow()
{
   document.mypic.src = kuvat[num]
   if( num < kuvat.length)
      { self.setTimeout("slideshow()", 1500) }
}


Nyt esim. kuvatiedostojen nimet sijoitetaan taulukkoon, josta ne myöhemmin vuorollaan poimitaan. Tällä tavalla ei tarvitse luoda turhia Image-objekteja pelkkien tiedostonimien tallentamista varten.

Tosin kuten sanottua, en ole mikään JavaScript-ekspertti :)

Fiksummaltahan tuo näyttää, jostain syystä en vain saa ensimmäistäkään kuvaa näkyviin.

Itse en osaa luoda tuota JavaScriptiä, lukea ehkä jonkin verran. Vähän sama tilanne kuin jos ymmärtää jotakin vierasta kieltä mutta ei itse osaa puhua, hullua eikö?

Älä ole siis turhan vaatimaton!

UPDATE_5299066 kirjoitti:

Jos haluat koodin hieman kätevämpään muotoon (ainakin omasta mielestäni), niin JavaScript-osuuden voisi tiivistää vaikkapa seuraavanlaiseksi:


var num = 0
kuvat = new Array()
kuvat[0] = "kuva1.jpg"
kuvat[1] = "kuva2.jpg"
kuvat[2] = "kuva3.jpg"

function slideshow()
{
   document.mypic.src = kuvat[num]
   if( num < kuvat.length)
      { self.setTimeout("slideshow()", 1500) }
}


Nyt esim. kuvatiedostojen nimet sijoitetaan taulukkoon, josta ne myöhemmin vuorollaan poimitaan. Tällä tavalla ei tarvitse luoda turhia Image-objekteja pelkkien tiedostonimien tallentamista varten.

Tosin kuten sanottua, en ole mikään JavaScript-ekspertti :)

rivi "num=num 1" jäi vahingossa puuttumaan, nyt toimii. Kiitos paljon avustasi!