NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Roman Grigar
Člen
Avatar
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Grigar
Honza Bittner:26.6.2014 17:36
  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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Grigar
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á

  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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Grigar
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.
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
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
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Roman Grigar
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.
Avatar
Roman Grigar
Člen
Avatar
Odpovídá na Honza Bittner
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
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.