Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web development, networking and server security. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Beskonačna petlja: Rotiranje slika pomoću jQuery-a (JavaScript)

Postavljeno: 10.07.2010 Autor: Brian McNitt

Nedavno smo napravili novi sajt za Ashton & Partners , dizajnersku firmu koja se nalazi u centru San Franciska. Naslovna strana Ashton & Partners sadrži niz slika koje polako unakrsno blede jedna do druge, sve što se može kontrolisati preko prilagođava se pomoću WordPress kontrolne table. Prilikom dizajniranja sajta, bilo je važno da sajt radi na uređajima koji ne podržavaju Flash (npr. - iPhone, iPad, itd.) tako da smo odlučili da stvorimo sve animacije na sajtu koristeći JavaScript.

Iako postoje već hiljade unapred napravljenih skripti animacija, većina skripti koje sam nasao su prenatrpane ili ne baš ono što nam je potrebno. Ispod su sastavni delovi naše prilagođe beskonačne petlje unakrsno bledećih skripti (HTML, CSS i Javascript) plus povezivanje sa ispravnim demoom i izvornim fajlovima. Napomena: primenom klase "rotirajućih-stavki", skripta može da se koristi za beskonačnu petlju nad bilo kojim skupom HTML elemenata (paragrafi, divs, itd.), samo što smo obeležili slike u ovom primeru.

HTML

Počećemo sa osnovnim HTML5 tipom dokumenata. U naslovu dokumenta, moramo povezati sa jQuery JavaScript bibliotekom koristeći Google AJAX APIs i uključiti naš ‘beskonačno-rotirajući.js' fajl. Napomena: za nešto brže učitavanje stranica možete povezati sa Javascript fajlovima na dnu, umesto sa HTML-om. Onda pravimo listu slika i svakoj dodeljujemo klasu "rotirajuće-stavke". Mi ćemo koristiti ovu klasu kasnije da kontrolišemo slike pomoću CSS-a i JavaScript-a. Konačno, okupite sve naše rotirajuće slike u DIV-u gde im dajemo ime "skup-rotiirajućih-stavki" koji smo objasnili u CSS odeljku. Nestilizovan, HTML će prikazati čitav niz slika.


    Infinite Rotating Images Using jQuery (JavaScript)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script><script type="text/javascript" src="js/infinite-rotator.js"></script>
</pre>
<h1>Infinite Rotating Images Using jQuery (JavaScript)</h1>
<div id="rotating-item-wrapper"><img class="rotating-item" src="images/greenpeople.jpg" alt="a person entering a building" width="980" height="347" />
 <img class="rotating-item" src="images/entrance.jpg" alt="photo of building across from our office" width="980" height="347" />
 <img class="rotating-item" src="images/bluepeople.jpg" alt="building entrance with neon backlit walls" width="980" height="347" />
 <img class="rotating-item" src="images/reflection3.jpg" alt="building lobby window reflections" width="980" height="347" />
 <img class="rotating-item" src="images/reflection2.jpg" alt="reflection on building windows" width="980" height="347" />
 <img class="rotating-item" src="images/manequine.jpg" alt="two manequines in window" width="980" height="347" /></div>
<pre>

CSS

Naš CSS kod je jednostavan i osnovni kod koji radi dve stvari -.pozicionira sve naše rotirajuće artikle na vrhu svake druge u DIV ambalaži i skriva stavke pomoću CSS ekrana=ništa.

#rotating-item-wrapper { position: relative; width: 980px; height: 347px; } .rotating-item { display: none; position: absolute; top: 0; left: 0; }

JavaScript

Ovo je srce funkcionalnosti rotirajućih slika. Sada kada imamo naše osnovne HTML oznake i imamo apsolutnu pozicioniranost i sakrivenost naših slika pomoću CSS-a, sada možemo da rotiramo između njih. Mi smo pokrenuli naš JavaScript samo onda kada su HTML dokumenti i slike završili učitavanje koristeći funkciju za učitavanje prozora. Za one upoznate sa jQuery-om, ovo je malo drugačije od komande za spreman dokument koja se pokreće nakon što je dokument spreman, ali ne i kada su povezane slike učitane, što je ovde važno. (Napomena: isto se može postići povezivanjem JavaScript datoteke na dnu HTML-a umesto u imenu dokumenta.) Mi tada definišemo nekoliko vremenski promenljivih—početno fade-in vreme, interval između stavki, i vreme unakrsnog izbleđivanja — sve spremno u milisekundama. Podesite po želji. Na liniji 23, mi smo otkrili prvu sliku, zatim na liniji 26 započeli našu beskonačnu petlju.

$(window).load(function() { //start after HTML, images have loaded var InfiniteRotator = { init: function() { //initial fade-in time (in milliseconds) var initialFadeIn = 1000; //interval between items (in milliseconds) var itemInterval = 5000; //cross-fade time (in milliseconds) var fadeTime = 2500; //count number of items var numberOfItems = $('.rotating-item').length; //set current item var currentItem = 0; //show first item $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn); //loop through the items var infiniteLoop = setInterval(function(){ $('.rotating-item').eq(currentItem).fadeOut(fadeTime); if(currentItem == numberOfItems -1){ currentItem = 0; }else{ currentItem++; } $('.rotating-item').eq(currentItem).fadeIn(fadeTime); }, itemInterval); } }; InfiniteRotator.init(); });

To je to! Nadam se da je ovaj primer koristan.

PS - proširenje ovog koda, možda ćete primetiti da je na početnoj strani Ešton & Partners ugrađen Easter Egg. Zabavne stvari se dešavaju kada "triput kliknete" na reč "Approachable ..."

PPS- Određeni broj ljudi u komentarima je pitao "možete li da izmenite kod da ... [da radi nešto drugo?]" Naravno, odgovor je da — ali koliko god bih želeo da pomognem, stvaranje prilagođenih skripti za sve jednostavno nije izvodljivo. Možete da pokušate postavljanjem pitanja u komentarima, a možda i neki drugi komentator može odgovoriti. U suprotnom, bolje rešenje bi bilo da naučite kako da to uradite sami. Zato, ja veoma preporučujem SitePoint’s Simply JavaScript, od Kevin Yank-a & Cameron Adams-a , a zatim i jQuery: Novice to Ninja, od Earle Castledine-a & Craig Sharkie-a. Proučite ove dve knjige, i pisaćete skripte kao što je ova od nule. Ozbiljno, možete to da uradite!

Uživali ste u ovom tekstu? Molimo Vas pretplatite se na našu e-mail listu , Facebook stranicu

Autor | Brian McNitt
Brian-ova karijera se kreće od pre-med na Purdue University do bicikliste i karijere u oblasti prodaje i marketinga za Schwinn i druge biciklističke kompanije. To je bio sve do početka World Wide Web-a, kada je svoje znanje iz nauke i marketinga, maksimalno iskoristio u web dizajnu. Bio je osnivački član Montclare Technologies— jedna od prvih i najboljih interaktivnih agencija u SAD-u. U 2000., on je osnovao TrendMedia, web dizajnerska i interaktivna agencija bazirana u San Francisku. Brian je sada jedan od vodećih stručnjaka u web tehnologijama i društvenim medijima, i priznati autoritet u web pristupačnosti, WordPress i SEO-u.





Published (Last edited): 20-03-2013