Diskuze: Header - slideshow

JavaScript JavaScript Header - slideshow

Avatar
Roman Grigar
Člen
Avatar
Roman Grigar:

Č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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Roman Grigar
Honza Bittner:
  1. třídu nedávej nikdy jako číslo, ani jako první písmeno nedávej číslo
  2. 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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
Roman Grigar:

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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Roman Grigar
Honza Bittner:

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á

  1. vždy zjistí počet obrázků v #slider
  2. 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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
Roman Grigar:

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

 
Nahoru Odpovědět 26.6.2014 19:43
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
Roman Grigar:

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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Roman Grigar
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
Roman Grigar:

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
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Roman Grigar
Honza Bittner:

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
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
Roman Grigar:

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
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.