--- title: "jQuery som växlar divar som bildspel" type: "forum-thread" url: "https://www.webforum.nu/amne/javascript/187920-jquery-som-växlar-divar-som-bildspel" topic: "JavaScript" topic_url: "https://www.webforum.nu/amne/javascript" author: "silfver" published: "2011-09-13T06:49:05.000Z" updated: "2012-09-13T06:49:36.000Z" replies: 22 views: 3970 page: 1 pages: 2 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/187920-jquery-som-växlar-divar-som-bildspel" --- # jQuery som växlar divar som bildspel _Sida 1 av 2._ ## #1 — silfver, 2011-09-13T06:49Z Har rotat runt lite efter en vettig slider men som vanligt får man en miljon träffar och alla ser olika ut. Det känns som det borde finnas jäkligt enkla lösningar där ute. Har hittat denna: Den är väl närmst det jag vill ha egentligen. Jag vill automatscrolla mellan divar, med valfritt innehåll, dock alltid lika stora. Ungefär fem stycken kommer det bli. Egentligen hade jag velat ha olika tid på varje. Nån som har några bra på lager? Jag är alltså inte ute efter en bild-slider som google översvämmas av utan en enkel div-slider. :) Permalänk: https://www.webforum.nu/p/187920 ## #2 — Danne V, 2011-09-13T07:07Z Permalänk: https://www.webforum.nu/p/2283081 ## #3 — silfver, 2011-09-13T08:21Z > **[Danne V skrev:](https://www.webforum.nu/p/1539967)** > > Där hittade du en lite mer avancerad slider från samma kille. Egentligen som inte har fler funktioner som jag har nytta av. Vill kunna tidsbestämma varje slide ocskå. :) Just nu kör jag denna: ``` $(function() { $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1500) .next() .fadeIn(1500) .end() .appendTo('#slideshow'); }, 3500); }); ``` Kan man på något vis sätta ett attribut på diven, t.ex. en class som innehåller antalet millisekunder just den sliden skall visas? Så man får ett lite mer dynamiskt flöde. Eller om man på något vis kan göra så här: ``` $("#slideshow > div(2)").setInterval(500); $("#slideshow > div(4)").setInterval(250); ``` Förstår ni mitt tänk? :) Permalänk: https://www.webforum.nu/p/2283082 ## #4 — voigtann1, 2011-09-13T10:14Z bygg vidare på det, sätt data objekt på hur länge ett element skall visas och hur snabb den skall vara på att försvinna (animeringen). Du har ju en bra grund redan. Gjorde ett exempel på tid innan nästa bild skall visas: använder bilder ifrån dig silfver om det var OK. Permalänk: https://www.webforum.nu/p/2283083 ## #5 — jme, 2011-09-13T13:08Z Jag gillar denna personligen: Permalänk: https://www.webforum.nu/p/2283088 ## #6 — silfver, 2011-09-13T13:58Z > **[voigtann1 skrev:](https://www.webforum.nu/p/1539969)** > > bygg vidare på det, sätt data objekt på hur länge ett element skall visas och hur snabb den skall vara på att försvinna (animeringen). Du har ju en bra grund redan. > > > Gjorde ett exempel på tid innan nästa bild skall visas: använder bilder ifrån dig silfver om det var OK. Ja, det är ok. :) Vad fiffigt du löst det. Men hur validerar dina egna attribut egentligen? Permalänk: https://www.webforum.nu/p/2283089 ## #7 — voigtann1, 2011-09-13T14:01Z data- attributen menar du? det är ett HTML5 attribut så det skall vara OK. Permalänk: https://www.webforum.nu/p/2283090 ## #8 — silfver, 2011-09-13T14:36Z > **[voigtann1 skrev:](https://www.webforum.nu/p/1539976)** > > data- attributen menar du? det är ett HTML5 attribut så det skall vara OK. Jag bugar och bockar. Så jäkla snyggt, som vanligt! :birp Har du tips på litteratur? Du får jättegärna pm:a mig om du har bra webbsidor eller böcker i jquery-ämnet för en rookie som börjar skämmas för att fråga på forum varje gång han behöver hjälp. ;) Permalänk: https://www.webforum.nu/p/2283091 ## #9 — voigtann1, 2011-09-13T15:07Z Jag började med att läsa dokumentationerna och byggde egna plugins som folk frågade efter ;) sen var det bara google så hittar man ju folk man tycker om och härmar efter ;) vet inte om det finns så många bra böcker (då jag inte har läst någon av dom :P ) Men har för mig Karl Swedbergs bok har fått många positiva ord. Det borde vara en bra bok då Karl är med i jquery teamet ;) Permalänk: https://www.webforum.nu/p/2283092 ## #10 — silfver, 2011-09-14T06:22Z > **[voigtann1 skrev:](https://www.webforum.nu/p/1539978)** > > Jag började med att läsa dokumentationerna och byggde egna plugins som folk frågade efter ;) sen var det bara google så hittar man ju folk man tycker om och härmar efter ;) vet inte om det finns så många bra böcker (då jag inte har läst någon av dom :P ) Men har för mig Karl Swedbergs bok har fått många positiva ord. Det borde vara en bra bok då Karl är med i jquery teamet ;) Sen ska man finna tiden att sätta sig in i det också. Men jag har koll på Swedberg, de har en bra jquery-tutorial site som jag sneglar på. Får läsa ALLT där. Tack igen! :bire Permalänk: https://www.webforum.nu/p/2283114 ## #11 — oskars, 2011-09-16T20:55Z Sök på "Orbit". Den bästa jag testat! Permalänk: https://www.webforum.nu/p/2283192 ## #12 — silfver, 2011-09-17T17:42Z > **[oskars skrev:](https://www.webforum.nu/p/1540097)** > > Sök på "Orbit". Den bästa jag testat! Kickass. Permalänk: https://www.webforum.nu/p/2283208 ## #13 — oskars, 2011-09-18T17:16Z silfver, told you! :D Bästa hittills! Permalänk: https://www.webforum.nu/p/2283223 ## #14 — voigtann1, 2011-09-18T17:22Z Men vad jag ser så kan du inte ställa in individuella timers på bilderna? eller? Permalänk: https://www.webforum.nu/p/2283224 ## #15 — silfver, 2012-09-10T14:18Z voigtann1: Det fina scriptet du gjorde till mig: det verkar inte kompatibelt med senaste jQuery-versionen. Jag får ett felmeddelande: ``` TypeError: nextData is null }, nextData.wait); ``` Några idéer på varför koden smäller? Permalänk: https://www.webforum.nu/p/2304554 ## #16 — voigtann1, 2012-09-10T14:21Z ``` var slider = function() { var css = { position: "absolute", top: 0, left: 0 }; var slideShow = $("#slideshow").children().filter(":gt(0)").hide().end().css(css).end(); var doAnimation = function() { var data = slideShow.children(":first").data(); setTimeout(function(trigger) { slideShow .children(":first") .fadeOut(1000) .next() .fadeIn(1000, trigger) .end() .appendTo(slideShow); }, data.wait, doAnimation); }; doAnimation(); return doAnimation; }(); ``` Permalänk: https://www.webforum.nu/p/2304555 ## #17 — silfver, 2012-09-10T14:29Z > **[voigtann1 skrev:](https://www.webforum.nu/p/1554437)** > > red. tydligen inte ;) återkommer Jag sitter å pillar här: :) Permalänk: https://www.webforum.nu/p/2304556 ## #18 — voigtann1, 2012-09-10T14:33Z ny kod uppdaterad, kommer nog en uppdatering om jag fattat bugg rapporter rätt (.find fungera inte i 1.8 ser det ut som). Permalänk: https://www.webforum.nu/p/2304557 ## #19 — silfver, 2012-09-11T10:49Z > **[voigtann1 skrev:](https://www.webforum.nu/p/1554439)** > > ny kod uppdaterad, kommer nog en uppdatering om jag fattat bugg rapporter rätt (.find fungera inte i 1.8 ser det ut som). Oj! Jag som trodde jQuery-teamet var felfria! :) Men du löste det snyggt som vanligt! Är det någon egentlig funktionsskillnad i att använda *.children(":first")* och *.find(":first")*? Förlåt för sent svar. Hade glömt klicka "Skicka svar". :p Permalänk: https://www.webforum.nu/p/2304574 ## #20 — voigtann1, 2012-09-11T11:05Z children() letar upp direkt barn... men i detta exempel så är det ingen skillnad, find gå djupare i DOM trädet. i detta fall är children en mer korrekt. Permalänk: https://www.webforum.nu/p/2304575 --- Tråden på webben: https://www.webforum.nu/amne/javascript/187920-jquery-som-växlar-divar-som-bildspel Nästa sida: https://www.webforum.nu/amne/javascript/187920-jquery-som-växlar-divar-som-bildspel/page2.md