Vad detta skript gör

Denna gratis JavaScript-bannerrotator visar en slumpmässig, klickbar bild på din webbplats. Det är skrivet i vanligt JS och kräver inga ytterligare bibliotek som jQuery. Det slumpmässiga valet görs på klientsidan, så det är enklare på din server också.

Eftersom rotatorskriptet är väldigt grundläggande och inte innehåller några extra funktioner som klickspårning, kommer det förmodligen att vara intressant för webbansvariga som just börjar tjäna pengar på sin webbplats. Större projekt kan vara berättigade för användning av en annonshanterare - även om de inte heller är utan nackdelar, eftersom de kan vara prydliga och få ytterligare omkostnader.

JavaScript

Placera den här koden i en textfil och spara den som, låt oss säga, rotator.js:

 var banner = [["destination1.com", "placeholder.com/image1.jpg"], ["destination2.com", "placeholder.com/image2.jpg"], ["destination3.com", "placeholder". com / image3.jpg "], [" destination4.com ", " placeholder.com/image4.jpg "]]; funktionsblandning (a) {var j, x, i; för (i = a.length - 1; i> 0; i--) {j = Math.floor (Math.random () * (i + 1)); x = a [i]; a [i] = a [j]; a [j] = x; } return a; } shuffle (banner); document.getElementById ('ad-container'). innerHTML = ' Bannerannons 300x250 '; 

Exempelkoden innehåller fyra banners i en matris, som blandas ut för att vara slumpmässiga och matas ut i behållaren som vi kommer att få om ett ögonblick. Du kan lägga till så många eller så få banners som du vill - ersätt bara destination1.com med den verkliga länken och placeholder.com/image1.jpg med URL till en verklig bild.

Till skillnad från några liknande bannerrotatorskript som finns på webben, lagrar inte detta hela HTML-formatet för banners i arrayen, utan bara länken och bilden, vilket sparar minne. HTML-utgången är längst ner i skriptet och bör redigeras med dina faktiska bannerdimensioner (300x250 i exemplet).

HTML & CSS

Du bör ha en tom containerdiv med ID för annonsbehållare någonstans i din HTML, i vilket skriptet dynamiskt kommer att infoga banners:

Behållarens dimensioner bör anges i CSS för att undvika återupptagning av webbläsaren när bannern laddas. Om du till exempel använder banderoller i storleken 300x250, vill du lägga till följande i ditt formatmall:

 # ad-container {höjd: 250px; bredd: 300px;} # ad-container img {border: 0;} 

Eller bara vara en hedning och utforma behållarens inline:

Laddar skriptet

Ladda nu skriptet genom att placera följande var som helst mellan din tags:

Eftersom skriptet kommer att laddas asynkront tack vare async- attributet kommer det inte att blockera sidåtergivning, och det finns heller inget behov av att gå ur din väg och placera det rätt före stängningen tag (även om du fortfarande kan, naturligtvis, om du är orolig för de föråldrade webbläsare som inte stöder async ).

Responsiv design

Om din webbplats är lyhörd, kanske banderollens behållare döljs på skärmar som är tillräckligt smala. Om så är fallet bör du förhindra att bannern laddas för att göra din webbplats snabbare för mobilanvändare. Redigera det ursprungliga rotatorskriptet genom att lägga till följande kontroll:

 if (windows.matchMedia ("(min. bredd: 1024px)"). matchar) {// det ursprungliga skriptet går här} 

Detta förhindrar att skriptet laddar ett banner om inte skärmen är minst 1024 pixlar bred. Justera numret så att det matchar mediefrågorna i ditt formatmall.