czasami pojedynczy obraz nie wystarczy, aby pokazać wszystko, co chcesz promować na swojej stronie. Jeśli kiedykolwiek zastanawiałeś się, w jaki sposób niektóre witryny mogą obracać kilka obrazów i chciałbyś to zrobić sam, cóż, nie zastanawiaj się więcej. Pokażę Ci, jak to się robi. Ponadto, jako dodatkową korzyść, pokażę Ci, jak możesz aktualizować swoje obrazy w jednym miejscu i sprawić, aby te aktualizacje pojawiały się globalnie w Twojej witrynie.

Załóżmy, że masz witrynę do gotowania i chcesz, aby zdjęcia pięciu ostatnich posiłków, które przedstawiłeś, zostały obrócone w banerze. Albo, powiedzmy, że masz witrynę z nieruchomościami i chcesz, aby zdjęcia Twoich ostatnich ofert 10 obracały się w określonym miejscu na wszystkich stronach. Aby dodać funkcjonalność, każdy obraz ma łączyć się z inną stroną. Wszystko to nie stanowi problemu z następującym kodem.

po pierwsze, musisz się zorganizować. Zbierz wszystkie obrazy do tego samego folderu i upewnij się, że mają ten sam rozmiar. Jeśli nie są tego samego rozmiaru i nie chcesz ich zniekształcić, po prostu zmień rozmiar obszaru roboczego każdego obrazu i nie zmieniaj rozmiaru samego obrazu. W ten sposób Element Zastępczy, w którym pojawiają się obrazy, nie zmieni kształtu w miarę pojawiania się każdego nowego obrazu.

po drugie, Zbierz wszystkie linki, które chcesz powiązać ze zdjęciami i zapisz je w dogodnym miejscu, aby móc je później skopiować i wkleić.

po trzecie, musisz wkleić następujące elementy do nagłówka każdej strony, na której ma się pojawić rotator obrazu:

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

na pierwszy rzut oka ten kod może wydawać się zastraszający. Jednak wszystko, co musisz zrobić, to zaktualizować ścieżkę do plików obrazów i wypełnić adresy URL linków. Oczywiście należy również zaktualizować atrybuty wysokości i szerokości, aby pasowały do witryny.

jeśli chcesz obrócić tylko cztery obrazy, po prostu usuń jeden z wierszy elementu. Jeśli chcesz go dodać, skopiuj i wklej oraz zaktualizuj elementy do elementów i tak dalej.

przygotowałeś teraz grunt pod dodanie tego rotatora obrazu do swojej witryny. Ale jest jeszcze jeden krok, który musisz zrobić, aby Twoje obrazy pojawiły się na stronie. Dowiedz się, gdzie chcesz, aby obrazy pojawiały się na stronie i skopiuj:

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

to wszystko. Kiedy po raz pierwszy zacząłem pracować nad dodaniem rotatora obrazów do mojej witryny, nie było to tak łatwe jak kopiowanie i wklejanie. Przejrzałem kilka różnych przykładów kodu, który znalazłem w Internecie. Większość z nich nie działała. Powyższy kod też nie działał, ale potem zrobiłem kilka poprawek tu i tam i udało mi się go uruchomić. Zrobiłem dla ciebie trudną część. Teraz wszystko, co musisz zrobić, to zaktualizować swoje zdjęcia i linki, zrobić trochę kopiowania i wklejania, i odejść.

jeśli zdecydujesz się użyć tego rotatora obrazów na kilku różnych stronach w Twojej witrynie, a następnie później musisz zmienić obrazy i zawartość, możesz to zrobić z jednej lokalizacji. Wymaga to jednak pewnego planowania z wyprzedzeniem. Wróćmy do przykładu strony z nieruchomościami. Podczas zapisywania obrazów zalecam użycie tej samej konwencji dla każdego obrazu, na przykład ” House1.jpg „oraz” House2.jpg ” i tak dalej. Następnie, jeśli chcesz zaprezentować nową serię domów, po prostu nazwij nowe obrazy przy użyciu tych samych nazw plików, co wcześniej. W ten sposób wszystkie strony będą wyświetlać nowe obrazy po wyczyszczeniu pamięci podręcznej przeglądarki lub odświeżeniu strony.

to samo działa dla każdego z linków. Zalecam wymienienie każdego z nich .plik htm, ” House1.htm ” i ” House2.htm ” i tak dalej. W ten sposób wszystko, co musisz zrobić, to zaktualizować zawartość w ramach .pliki htm i łącza w rotatorze obrazów automatycznie wskażą nową zawartość.