néha egyetlen kép egyszerűen nem elegendő ahhoz, hogy bemutassa mindazt, amit hirdetni szeretne a webhelyén. Ha valaha is azon tűnődtél, hogy egyes webhelyek hogyan kapnak több képet forgatni, és ezt magad is meg szeretnéd csinálni, nos, ne csodálkozz többet. Azért vagyok itt, hogy megmutassam, hogyan kell ezt csinálni. Ezenkívül további előnyként megmutatom, hogyan frissítheti képeit egy helyen, és ezek a frissítések globálisan megjelennek a webhelyén.

tegyük fel, hogy van szakácshelyed, és képeket szeretnél az öt legutóbbi ételről, amelyeket bemutattál, hogy elforgathassák a bannerben. Vagy tegyük fel, hogy van egy ingatlan webhelye, és azt szeretné, hogy a 10 legutóbbi listájáról készült képek az összes oldalon egy adott helyen forogjanak. A funkciók hozzáadásához azt szeretné, hogy minden kép egy másik oldalra hivatkozzon. Mindez nem jelent problémát a következő kóddal.

először meg kell szervezned. Gyűjtse össze az összes képet ugyanabba a mappába, és győződjön meg róla, hogy azonos méretűek. Ha nem azonos méretűek, és nem akarja torzítani őket, akkor egyszerűen méretezze át az egyes képek vászonját, és ne méretezze át magát a képet. Így a helyőrző, ahol a képek megjelennek, nem változtatja meg az alakját, amikor minden új kép megjelenik.

másodszor, Gyűjtse össze az összes linket, amelyet a képekhez szeretne társítani, és mentse el őket valahol kényelmesen, így később másolhatja és beillesztheti őket.

harmadszor, be kell illesztenie a következőket minden olyan oldal fejlécébe, amelyen a képforgató megjelenik:

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

első pillantásra ez a kód félelmetesnek tűnhet. Csak annyit kell tennie, hogy frissíti a képfájlok elérési útját, és kitölti a linkek URL-jét. Természetesen frissítenie kell a magasság és szélesség attribútumokat is, hogy illeszkedjenek a webhelyéhez.

ha csak négy képet szeretne forgatni, akkor egyszerűen törölje az egyik elemsort. Ha hozzá szeretne adni egyet, akkor másolja és illessze be és frissítse az elemeket az elemekhez és így tovább.

most már megalapozta a munkát, hogy hozzáadja ezt a képforgatót a webhelyéhez. De van még egy lépés, amelyet meg kell tennie, hogy képei megjelenjenek az oldalon. Határozza meg, hogy a képek hol jelenjenek meg az oldalon, majd másolja be:

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

ennyi az egész. Amikor először elkezdtem dolgozni egy képforgató hozzáadásával a webhelyemhez, nem volt olyan egyszerű, mint a másolás és a beillesztés. Átmentem több különböző példát kódot, hogy találtam az interneten. Legtöbbjük nem működött. Ez a fenti kód sem működött, de aztán itt-ott elvégeztem néhány módosítást, és sikerült működtetni. A nehezén már túl vagyok. Most már csak annyit kell tennie, hogy frissíti a képeket és a linkeket, csinál egy kis másolást és beillesztést, és el is megy.

ha úgy dönt, hogy ezt a képforgatót több különböző oldalon használja a webhelyén, majd később meg kell változtatnia a képeket és a tartalmat, akkor ezt egy helyről teheti meg. Ez azonban némi tervezést igényel. Térjünk vissza egy ingatlanoldal példájára. A képek mentésekor azt javaslom, hogy minden képhez ugyanazt a konvenciót használja, például: “Ház1.jpg ” és ” House2.jpg ” és így tovább. Ezután, amikor új házsorozatot szeretne bemutatni, egyszerűen nevezze el az új képeket ugyanazokkal a fájlnevekkel, mint korábban. Így az összes oldal megmutatja az új képeket, miután a böngésző törli a gyorsítótárat, vagy frissíti az oldalt.

ugyanez működik az egyes Linkeknél. Az én javaslatom az, hogy nevezze meg mindegyiket .htm fájl, ” Ház1.htm ” és ” Ház2.htm ” és így tovább. Ily módon csak annyit kell tennie, hogy frissíti a tartalmat a .a htm fájlok és az image rotator linkjei automatikusan az új tartalomra mutatnak.