uneori, o singură imagine pur și simplu nu este suficient pentru a prezenta tot ceea ce doriți să promoveze pe site-ul dvs. Dacă v-ați întrebat vreodată cum unele site-uri obține mai multe imagini pentru a roti și doriți să faceți asta singur, Ei bine, întreb nu mai mult. Sunt aici să-ți arăt cum se face. De asemenea, ca un beneficiu suplimentar, vă voi arăta cum vă puteți actualiza imaginile într-o singură locație și cum aceste actualizări apar la nivel global pe site-ul dvs.
să presupunem că aveți un site de gătit și doriți imagini cu cele mai recente cinci mese pe care le-ați prezentat pentru a le roti în banner. Sau, să presupunem că aveți un site imobiliar și doriți ca imaginile celor mai recente 10 înregistrări să se rotească într-un anumit loc pe toate paginile dvs. Pentru a adăuga funcționalitate, doriți ca fiecare imagine să se conecteze la o altă pagină. Toate acestea nu sunt o problemă cu următorul cod.
în primul rând, trebuie să vă organizați. Colectați toate imaginile în același folder și asigurați-vă că au aceeași dimensiune. Dacă nu au aceeași dimensiune și nu doriți să le distorsionați, atunci redimensionați pur și simplu pânza fiecărei imagini și nu redimensionați imaginea în sine. În acest fel, substituentul în care apar imaginile nu își va schimba forma pe măsură ce apare fiecare imagine nouă.
în al doilea rând, colectați toate linkurile pe care doriți să le asociați cu imaginile și salvați-le undeva convenabil, astfel încât să le puteți copia și lipi mai târziu.
în al treilea rând, trebuie să lipiți următoarele în antet pentru fiecare pagină pe care doriți să apară rotatorul de imagine:
<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>
la prima vedere, acest cod poate părea intimidant. Cu toate acestea, tot ce trebuie să faceți este să actualizați calea către fișierele imagine și să completați adresele URL pentru linkuri. Desigur, ar trebui să actualizați și atributele de înălțime și lățime pentru a se potrivi site-ului dvs.
dacă doriți să se rotească doar patru imagini, ștergeți pur și simplu unul dintre rândurile de elemente. Dacă doriți să adăugați unul, copiați și lipiți și actualizați elemente la elemente și așa mai departe.
acum ați pus bazele pentru adăugarea acestui rotator de imagini pe site-ul dvs. Dar mai trebuie să faceți un pas pentru ca imaginile dvs. să apară pe pagină. Aflați unde doriți să apară imaginile pe pagină și copiați-le în:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
asta e tot acolo este să-l. Când am început să lucrez la adăugarea unui rotator de imagini pe site-ul meu, nu a fost la fel de ușor ca copierea și lipirea. Am trecut prin mai multe exemple diferite de cod pe care le-am găsit online. Majoritatea nu au funcționat. Acest cod de mai sus nu au de lucru, fie, dar apoi am făcut câteva trucuri aici și acolo și a reușit să-l de lucru. Am făcut partea grea pentru tine. Acum tot ce trebuie să faceți este să vă actualizați imaginile și linkurile, să faceți puțină copiere și lipire și să plecați.
dacă decideți să utilizați acest rotator de imagini pe mai multe pagini diferite din site-ul dvs. și apoi mai târziu trebuie să schimbați imaginile și conținutul, puteți face acest lucru dintr-o singură locație. Cu toate acestea, acest lucru necesită o planificare înainte. Să ne întoarcem la exemplul unui site imobiliar. Când salvați imaginile, vă recomandăm să utilizați aceeași convenție pentru fiecare imagine, de exemplu, „House1.jpg ” și ” House2.jpg ” și așa mai departe. Apoi, când doriți să prezentați o nouă serie de case, pur și simplu denumiți noile imagini folosind aceleași nume de fișiere ca înainte. În acest fel, toate paginile dvs. vor afișa noile imagini după ce browserul șterge memoria cache sau reîmprospătați pagina.
aceleași lucrări pentru fiecare dintre link-uri. Recomandarea mea este de a numi fiecare .fișier htm, ” House1.htm ” și ” House2.htm ” și așa mai departe. În acest fel, tot ce trebuie să faceți este să actualizați conținutul din cadrul .fișierele htm și linkurile din rotatorul de imagini vor indica automat noul conținut.