joskus yksi kuva vain ei riitä esitellä kaikkea, mitä haluat edistää sivustossasi. Jos olet joskus miettinyt, miten jotkut sivustot saavat useita kuvia pyörimään, ja haluaisit tehdä sen itse, no, älä ihmettele enää. Näytän, miten se tehdään. Myös, lisäetuna, näytän sinulle, miten voit päivittää kuvia yhdessä paikassa ja ne päivitykset näkyvät maailmanlaajuisesti sivustossasi.

oletetaan, että sinulla on kokkaussivusto, ja haluat kuvia viidestä viimeisimmästä ateriasta, jotka olet esittänyt pyörimään bannerissa. Tai, oletetaan, että sinulla on kiinteistöjen sivuston ja haluat kuvia 10 uusimmat listaukset kiertää tietyssä paikassa kaikki sivut. Lisätäksesi toiminnallisuutta, haluat jokaisen kuvan linkittävän eri sivulle. Kaikki tämä ei ole ongelma seuraavan koodin.

ensin on järjestäydyttävä. Kerää kaikki kuvat samaan kansioon ja varmista, että ne ovat samankokoisia. Jos ne eivät ole samankokoisia, etkä halua vääristää niitä, muuta vain kunkin kuvan kankaan kokoa äläkä muuta itse kuvan kokoa. Näin paikka, jossa kuvat näkyvät ei muuta muotoaan jokaisen uuden kuvan ilmestyessä.

toiseksi, kerää kaikki linkit, jotka haluat liittyvät kuvia ja tallentaa ne jonnekin kätevä, jotta voit kopioida ja liittää ne myöhemmin.

kolmanneksi, sinun täytyy liittää seuraavat otsikkoon kunkin sivun haluat kuvan rotaattori näkyviin:

<script language="JavaScript1.2″>
var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6
// place your images, text, etc in the array elements here
var items = new Array();
items="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items;
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}
function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items
if(document.all)
placeholderdiv.innerHTML=items;
 current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>

ensi silmäyksellä tämä koodi voi vaikuttaa uhkaavalta. Kuitenkin, kaikki mitä sinun tarvitsee tehdä, on päivittää polku kuvatiedostot ja täyttää url linkkejä. Tietenkin, sinun pitäisi myös päivittää korkeus ja leveys attribuutteja sopivaksi sivustoosi.

jos haluat pyörittää vain neljää kuvaa, Poista vain yksi kohderiveistä. Jos haluat lisätä yhden, kopioi ja liitä ja päivittää kohteita kohteita ja niin edelleen.

olet nyt luonut pohjatyön tämän kuvan rotaattorin lisäämiseksi sivustoosi. Mutta on vielä yksi askel sinun täytyy tehdä kuvia näkyvät sivulla. Selvitä, missä haluat kuvien näkyvän sivulla ja kopioi:

<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>

siinä kaikki. Kun aloitin työn lisäämällä kuvan rotaattori sivustolleni, se ei ollut yhtä helppoa kuin kopiointi ja liittäminen. Kävin läpi useita erilaisia esimerkkejä koodista, jonka löysin netistä. Useimmat niistä eivät toimineet. Tämä edellä koodi ei toimi myöskään, mutta sitten tein muutamia parannuksia siellä täällä ja onnistui saamaan sen toimimaan. Tein vaikeimman osan vuoksesi. Nyt sinun tarvitsee vain päivittää kuviasi ja linkkejäsi, tehdä hieman kopiointia ja liittämistä, ja pois.

jos päätät käyttää tätä Kuvan rotaattori useilla eri sivuilla sivuston ja sitten myöhemmin sinun täytyy muuttaa kuvia ja sisältöä voit tehdä niin yhdestä paikasta. Tämä vaatii kuitenkin jonkin verran etukäteissuunnittelua. Palataan esimerkkiin kiinteistösivustosta. Kun tallennat kuvat, suosittelen käyttämään samaa käytäntöä jokaiseen kuvaan, esimerkiksi ” House1.jpg ” ja ” House2.jpg ” ja niin edelleen. Sitten, kun haluat esitellä uuden sarjan taloja, yksinkertaisesti nimetä uusia kuvia käyttäen samoja tiedostonimiä kuin ennen. Näin kaikki sivusi näyttävät uudet kuvat, kun selain tyhjentää välimuistin tai päivität sivun.

sama toimii jokaisen linkin kohdalla. Suosittelen nimeämään jokaisen .htm-tiedosto, ” House1.htm” ja ” House2.htm ” ja niin edelleen. Näin, sinun tarvitsee vain päivittää sisältöä sisällä .htm-tiedostot ja kuvien rotaattorin linkit viittaavat automaattisesti uuteen sisältöön.