Diskuze: Header - slideshow

Roman Grigar

Člen

Roman Grigar:26.6.2014 17:28

Čaau, začínám s javascriptem a jQuery a ještě to moc neovládám, tak bych potřeboval radu. Chci si udělat měnící záhlaví(header) třeba po 10ti sekundách. Sesmolil jsem nějak tento javascript. Mám ve složce obrázky, které mají název 1,2,3,.. a ty se střídají.. Ono mi to funguje, ale problém je,že když budu scrollovat stránku a budu někde dole, tak každých 10 sekund co se změní header mi to vyskočí zpátky nahoru.

Javascript:

function slideshow() {
  var img = $("#header").last().attr("class");
  var count = parseInt(img) + 1;

  if (count == 5) count = 1;
  $("#header").hide();
  $("#header").css("background-image", "url(img/headers/img"+count+".jpg)");
  $("#header").fadeIn(2000);
  $("#header").removeClass();
  $("#header").addClass(''+count+'');
}

$(document).ready(function() {
 // setInterval( "slideshow()", 10000 );
});

no a v html mám:

<div id="header" class="1"></div>

Poradil by mi prosím někdo jak to udělat jinak?

Děkujii

Odpovědět

26.6.2014 17:28

Honza Bittner

Tvůrce

Honza Bittner:26.6.2014 17:36

třídu nedávej nikdy jako číslo, ani jako první písmeno nedávej číslo
proč ten header vždy skryješ celý a pak ho zobrazuješ?

Jaký efekt chceš? Jak vypadá stránka - screenshot?

Nahoru Odpovědět

26.6.2014 17:36

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Roman Grigar

Člen

Roman Grigar:26.6.2014 17:42

dobře, díky, poučím se z toho ... no chci aby měl postupnej náběh.. mám tam zatím jenom 4 obrázky, které mají stejnej rozměr a ty obrázky mají zatím jen různé barvy, abych viděl jak to funguje. Jinak časem tam budu chtít 3-4 měnící se obrázky, stejného rozměru. Je to klasickej jednosloupcovej layout (header, menu, obsah, patička)

Nahoru Odpovědět

26.6.2014 17:42

Honza Bittner

Tvůrce

Honza Bittner:26.6.2014 18:05

Udělej si element #slider, do něho vlož obrázky jakožto img.
Nastyluj #slider, img roztáhni na 100% šířky.

JS:
Nejdříve si musíš udělat funkci, která

vždy zjistí počet obrázků v #slider
skryješ poslední obrázek - s animací

-- za čas animace spustíš:
3. poslední obrázek vložíš na index 0 - před "#slider img:eq(0)"
4. první obrázek zobrazíš - bez animace - 0ms

a tuto funkci budeš volat v daném intervalu

Takto nějak by to mělo fungovat aby ti vznikl efekt prolnutí.

Nahoru Odpovědět

26.6.2014 18:05

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Roman Grigar

Člen

Roman Grigar:26.6.2014 19:43

Děkujuu, no nejspíš to nezvládnu podle toho, ale zkusím to

Nahoru Odpovědět

26.6.2014 19:43

Roman Grigar

Člen

Roman Grigar:26.6.2014 20:31

no, něco mám. Řekl bych že 2 kroky. Mohl bys mi prosím s tím dalším pomoc?
HTML:

<div id="header">
  <div id="slider">
    <img src="img/headers/img1.jpg" />
    <img src="img/headers/img2.jpg" />
    <img src="img/headers/img3.jpg" />
  </div>
</div>

a Javascript:

function slideshow() {
  var delka = $('#slider img').length;
  $("#slider img:last").fadeOut(2000);
}

$(document).ready(function() {

  setInterval( "slideshow()", 1000 );

});

Nahoru Odpovědět

26.6.2014 20:31

Honza Bittner

Tvůrce

Honza Bittner:26.6.2014 21:00

Od délky odečti 1, jelikož chceš pracovat od nuly - s indexy. Délku vlastně ani nepotřebuješ, když využíváš ":last"...

Co zde nemáš je, že nepřehazuješ poslední, tedy viditelný, obrázek na první, respektive nulté, místo. Tedy něco jako

setTimeout(function(){
      $("#slider img:last").insertBefore("#slider li:first");
      $("#slider img:first").fadeIn();
   }, 2000);

Nyní by jsi měl míti obrázky pod sebou a měly by se ti přehazovat z konce - dole - na začátek - nahoru. Toto pak ještě upravíš přidáním absolutní pozice na obrázky, tzn. se ti hodí všechny na sebe a bude vidět jen spodní. Také nezapomeň přidat na #slider relativní pozici.

Nahoru Odpovědět

26.6.2014 21:00

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Roman Grigar

Člen

Roman Grigar:26.6.2014 21:23

Funguje to skoro, děkuju moc. Při scrollování to zůstává na tom místě kde má, ale nefunguje to prolínání :/
Skáče to jak kdyby tam bylo hide() a show()

Nahoru Odpovědět

26.6.2014 21:23

Honza Bittner

Tvůrce

Honza Bittner:26.6.2014 21:29

Nebude to tím, že animace trvá 2s ale ty voláš funkci tím intervalem po 1s? ... Nevím, musíš si to doladit.

Nahoru Odpovědět

26.6.2014 21:29

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Roman Grigar

Člen

Roman Grigar:27.6.2014 11:01

tak, vyřešeno kdyby někdo řešil podobný problém, tak přikládám zdrojáky.
Díky za pomoc:)

HTML

<div id="header">
  <div id="slider">
    <img class="header" src="img/headers/img1.jpg" />
    <img class="header" src="img/headers/img2.jpg" />
    <img class="header" src="img/headers/img3.jpg" />
  </div>
</div>

CSS

.header            {
  position: absolute;
  display: none;
}
#slider           {
  position: relative;
}

a JS:

function slideshow(){
      $("#slider img:first").fadeOut();
      $("#slider img").hide(1000);
      $("#slider img:last").insertBefore("#slider img:first");
      $("#slider img:first").fadeIn();
   }

$(document).ready(function() {

  $("#slider img:first").show();
  setInterval( "slideshow()", 5000 );

});

Nahoru Odpovědět

27.6.2014 11:01