CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede VisueltDesign Nybegynder
04. januar 2012 - 08:32 Der er 11 kommentarer

Banner rotation

Har brug for et simpelt javascript. Jeg har 22 bannere (01.jpg - 22.jpg), hvor jeg skal rotere 5 af dem random.

De skal være i ordnet rækkefølge. Eks. banner 2, 6, 12, 14, 18.
Der skal være mulighed for at rækkefølgen tilfældigt er (eks. vis) 18, 19, 20, 21, 22. Så jeg kan ikke lave 5 grupper af bannere med hvert sit script. Der må ikke være gentagelser af samme banner.

Håber, det er klart nok formuleret ;-)
Avatar billede audiotribe Nybegynder
04. januar 2012 - 10:50 #1
Prøv evt. at kigge på CodeCanyon!

http://bit.ly/zcZE5Q
Avatar billede olebole Juniormester
04. januar 2012 - 16:10 #2
<ole>

Random eller i rækkefølge?

/mvh
</bole>
Avatar billede VisueltDesign Nybegynder
05. januar 2012 - 08:33 #3
@ <Ole>

Random i den forstand at det er tilfældige 5 ud af af de 22 bannere, der skal vises. I rækkefølge i den forstand at de skal vises i numerisk rækkefølge - laveste nummer først.

/jørgen
Avatar billede olebole Juniormester
05. januar 2012 - 15:50 #4
- og de skal ikke linke til noget - eller?
Avatar billede VisueltDesign Nybegynder
05. januar 2012 - 15:56 #5
Nej, ingen links. De er nedenunder banneret.
Avatar billede olebole Juniormester
05. januar 2012 - 16:27 #6
Det kunne gøres noget i stil med:


<script type="text/javascript">
if(!Array.prototype.shuffle){Array.prototype.shuffle=function(){var a,b,j,I=this,i=I.length;if(i==0)return I;while(--i){j=Math.floor(Math.random()*(i+1));a=I[i];b=I[j];I[i]=b;I[j]=a}}};
var aBans = [
    "01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg"
];
var nBanCount = 0;
function rotateBanner() {
    nBanCount = nBanCount>=4 ? 0 : ++nBanCount;
    document.getElementById("banner").setAttribute("src", aBans[nBanCount]);
}
function initBanner() {
    aBans.shuffle();
    aBans = aBans.splice(0, 5);
    aBans.sort();
    setInterval("rotateBanner()", 2000);
    if (window.removeEventListener) window.removeEventListener("load", initBanner, false);
    else if (window.detachEvent) window.detachEvent("onload", initBanner);
}

if (window.addEventListener) window.addEventListener("load", initBanner, false);
else if (window.attachEvent) window.attachEvent("onload", initBanner);
</script>

<img src="trans.png" id="banner" alt="Banner rotator">

Avatar billede VisueltDesign Nybegynder
05. januar 2012 - 18:42 #7
Ser godt ud - da jeg satte scriptet i gang kunne jeg se at det nok kunne misforstås. Der skal være 5 bannere samtidigt - og de skal så blive stående... ved genindlæsning kommer der så et nyt "sæt" af 5 bannere...
Avatar billede olebole Juniormester
06. januar 2012 - 15:19 #8
Så prøv dette i stedet:


<script type="text/javascript">
if(!Array.prototype.shuffle){Array.prototype.shuffle=function(){var a,b,j,I=this,i=I.length;if(i==0)return I;while(--i){j=Math.floor(Math.random()*(i+1));a=I[i];b=I[j];I[i]=b;I[j]=a}}};
var aBans = [
    "01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg"
];
function initBanner() {
    aBans.shuffle();
    aBans = aBans.splice(0, 5);
    aBans.sort();
    for (var i=0; i<5; i++) {
        document.getElementById("banner_"+i).setAttribute("src", aBans[i]);
    }
    if (window.removeEventListener) window.removeEventListener("load", initBanner, false);
    else if (window.detachEvent) window.detachEvent("onload", initBanner);
}

if (window.addEventListener) window.addEventListener("load", initBanner, false);
else if (window.attachEvent) window.attachEvent("onload", initBanner);
</script>

<img src="trans.png" id="banner_0" alt="Banner rotator">
<img src="trans.png" id="banner_1" alt="Banner rotator">
<img src="trans.png" id="banner_2" alt="Banner rotator">
<img src="trans.png" id="banner_3" alt="Banner rotator">
<img src="trans.png" id="banner_4" alt="Banner rotator">

Avatar billede olebole Juniormester
06. januar 2012 - 15:38 #9
- men hvis din server understøtter PHP, ville jeg foretrække at skrive noget i stil med:


<?php
class BannerRotator {
    private $aBans;
    public function output($inx) {
        echo '<img src="'.$this->aBans[$inx].'" alt="Banner Rotator #'.$inx.'">';
    }
    public function __construct($aBanners) {
        shuffle($aBanners);
        $this->aBans = array_splice($aBanners, 0, 5);
        sort($this->aBans);
    }
}
$aBanners = array (
    "01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg", "09.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg"
);
$rotator = new BannerRotator($aBanners);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>

<p><?php $rotator->output(0) ?></p>
<p><?php $rotator->output(1) ?></p>
<p><?php $rotator->output(2) ?></p>
<p><?php $rotator->output(3) ?></p>
<p><?php $rotator->output(4) ?></p>

</body>
</html>

Avatar billede VisueltDesign Nybegynder
06. januar 2012 - 16:27 #10
> Ole;

Det virker perfekt ;-)

Kunne ikke være mere tilfreds.

Godt nytår...
Avatar billede olebole Juniormester
06. januar 2012 - 17:32 #11
Tak i lige måde. Da jeg ikke samler point, lægger du bare selv et svar og accepterer det. Herved lukkes tråden - og du beholder dine point til andre spørgsmål  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript 4 24/06/202422:50 26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript 6 04/06/202416:23 05/06/202414:23
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 08:31 HVIS med datoer Af HHA i Excel
I går 20:12 Ældre lysstofarmatur (2011) Af ErikHg i Fri debat
I går 14:05 Numerisk liste Af AND i Excel
I går 09:39 Ændre nuller til ovenstående tal Af boro23 i Excel
I går 06:47 videoclip - icon Af Malm i Andet software
White papers
Flere white papers »


Premium
Teaser billede
KMD-kontrakt på vej mod afslutning: Skattevæsenet søger ny leverandør til kæmpe-aftale til 390 millioner kroner
Læs mere »
Kæmpe-opgave for Danske Bank har banet vej for fuldautomatiseret migrering til cloud: Nu udbredes metoden i hele AWS
Danske storbanker slår alarm: Hackere blokerer for adgang til din netbank via smart-tv og kaffemaskiner
Microsoft udbygger: Her er de kommende AI-funktioner i Microsoft Office 365
Se alle »
Computerworld
Teaser billede
60.000 routere risikerer at blive overtaget af hackere – producent afviser at fikse problemet
Læs mere »
Politiet måber: Apple gør det sværere at hacke iPhones
Test: Audi Q6 er en super fed SUV - men gør dig selv en tjeneste og kast flere penge efter den
Det vrimler frem med gratis-alternativer til ChatGPT Plus – her er de bedste af dem
Se alle »
CIO
Teaser billede
Dansk ”AI-kogebog” er klar: Her er ni nedslagspunkter, der skal sende Danmark forrest i AI-kapløbet
Læs mere »
Danske sygehuse når ikke at opgradere tusindvis af computere til Windows 11 i tide: Får konsekvenser for it-sikkerheden
Stor sag mod Microsoft kan være på vej: Beskyldes for at låse Azure-kunder fast med ulovlige metoder
Fire anbefalinger fra top-analytiker: Fremtidens ERP er på trapperne og vil konstant skifte form efter brugerne
Se alle »
Job & Karriere
Teaser billede
Microsoft klar med ny direktion for den danske forretning: Her er de nye direktører
Læs mere »
Tre Norlys-topchefer fratræder med omgående virkning: Internet-forretningen er udfordret - vil have mere fart i integrationen af Telia Danmark
Efter skelsættende møde med sportscoach: Stor dansk it-arbejdsplads indfører fredags-fri og isbade i arbejdstiden
Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre
Se alle »
White paper
Teaser billede
Vær proaktiv og prioritér IT-sikkerheden – før det er for sent
Læs mere »
Sikkerhed uden grænser: Cisco Hypershield
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering
SMB og cybertrusler: Brug sikkerhedsressourcerne optimalt
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »