Prosty rotator banerów

Nie wiem czy to się nazywa rotator, ale chodzi mi o skrypt, ktory przy każdym wczytywaniu strony bedzie pokazywal losową grafikę będącą odnosnikiem do jakiejs strony.

Zapomniałem dodać, że ma to być w formie skryptu.

Niestety ten co mam nie działa…

<script> 
document.addEventListener("DOMContentLoaded", function() {
let images=[];
images[1] = "<a href=' link'><img src='foto '></a>";
images[2] = "<a href=' link'><img src='foto '></a>";
let liczba = Math.floor((Math.random() * 2) + 1);
document.getElementById('obraz').innerHTML=images[liczba];
});
</script>
<div id="obraz" style="width:300px; height:300px;">
</div>

https://jsfiddle.net/o0tkc86m/
Tablice numerowane są od 0 a nie od 1 - przez co miałeś 3-elementową tablicę. Algorytm licz losowych też przez to był lekko błędny bo losowałeś w zakresie 1 <= N < 2, czyli jedną liczbę.

1 polubienie

Dziękuję, sprawdzę w wolnym czasie

Drogi @Fizyda, a,da się zrobić tak abym mógł zdecydować co ma się wyświetlić na urządzeniu mobilnym a co na deskopie?

Da, ale nie ma jednego rozwiązania do tego działającego w 99,9% przypadków. Zawsze będzie istniała opcja, ze ktoś na urządzeniu mobilnym wymusi wyświetlenie zawartości desktopowej i odwrotnie.
Dużo zależy od tego jaki masz cel, jeśli tylko dostosowanie rozmiaru pod urządzenie to nie ma problemu, jeśli myślisz o ukryciu jakiś informacji tak by nie dało się ich zobaczyć na danym urządzeniu to jest to bardzo skomplikowane i do tego zazwyczaj do obejścia.

Chcę, aby grafika X, Y pokazywana była na urządzeniach mobilnych, a grafika A, B pokazywana na deskopach.

Nie interesuje mnie, że ktoś będzie przeglądał stronę na smartfonie w wersji deskopowej i odwrotnie.

Czy jest jakaś zależność pomiędzy tymi grafikami? Tj X zastępuje A natomiast Y zastępuje B. I zawsze masz pary? Czy one nie mają ze sobą związku i powiedzmy na telefonie chcesz wyświetlać baner z audiobookami a na desktopie z filmami i ich ilość może być różna na różnych typach urządzeń?

Bez zależności, same grafiki z linkami.

Więc będzie to trudniejszy przypadek. Albo na backend musisz na podstawie user agent stwierdzić czy masz doczynienia z desktopem czy urządzeniem mobilnym i przesłać tylko te banery które chcesz, albo wysyłasz wszystko i w JS na frontendzie sprawdzasz znów user agent jaki jest typ urządzenia i wyświetlasz tylko to co chcesz.
Tak czy siak obecny kod wymaga przerobienia, właściwie to w całości. Oczywiście rozpoznawanie typu urządzenia bo user agent nie jest takie proste i nie jest to najskuteczniejszy sposób, ale jest to pierwsza rzecz od której należy zacząć. Przykłady jak to robić są w internecie więc nie będę powielał informacji. Teraz jeszcze przyszło mi do głowy, ze chyba widziałem jakąś bibliotekę JS do rozpoznawania urządzeń i to byłoby o tyle spoko, że gdybyś użył zewnętrznego skryptu ciągle aktualizowanego nie musiałbyś dbać o to by Twój algorytm zawsze miał aktualne informacje o user agentach.

1 polubienie