• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Skrypt slajdera javascript + jquery

Aruba Cloud - Virtual Private Server VPS
0 głosów
927 wizyt
pytanie zadane 3 stycznia 2017 w JavaScript przez Marecki Obywatel (1,690 p.)

witam,

w kursie javascript Pana Zelenta w odcinku ze slajderem Pan Zelent napisał prosty slajder używając javascriptu i jquery w którym CHOWA SIĘ CAŁY DIV O ID "SLIDER" A POTEM POKAZUJE SIĘ przez zastosowanie fadeIn oraz fadeOut. Chciałbym zrobić tak, żeby NIE CHOWAŁ SIĘ CAŁY DIV A TYLKO ZDJĘCIE. Dobrnąłem do takiego momentu ->

function schowaj()
{
	$("#zdj").fadeOut(1000);
}


function zmienslajd()
	 {
		var numer = 1;
		numer++; if(numer>10) numer=1;
		
		var plik = "<img src=\"images/slider" + numer + ".JPG\" style=\"border-radius: 100%\" id=\"zdj\"/>";
		
		document.getElementById("slider").innerHTML = plik;
		
		$("#zdj").fadeIn(1000); 
		
		setTimeout("zmienslajd()",6000);
		setTimeout("schowaj()",5000);
		
	 }

w którym to nadałem w znaczniku <img> atrybut id="zdj" i w ten sposób chowa się zdjęcie w sposob nazwijmy to "animowany" natomiast jak zrobić żeby kolejne zdjęcie też pojawiało się w sposób animowany? W ten sposób od razu jakby pojawia się kolejne zdjęcie.

1 odpowiedź

0 głosów
odpowiedź 4 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
W jakiej postaci węzły są przekazywane do funkcji. (Kolejne zdjęcia)
komentarz 4 stycznia 2017 przez Marecki Obywatel (1,690 p.)
var numer = 1;
        numer++; if(numer>10) numer=1;
         
        var plik = "<img src=\"images/slider" + numer + ".JPG\" style=\"border-radius: 100%\" id=\"zdj\"/>";
         
        document.getElementById("slider").innerHTML = plik;

 

komentarz 5 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Ustaw wartość wstępną opacity:

$('#zdj').css.opacity = 0;

wywołaj metodę fadeIn.

Jak dobrze pamiętam to css to w jQuery jest to style, na którym operuje metoda fadeIn. I tu nie jestem pewny czy fadeIn ustawiał jakąś wartośc końcową albo on usuwał ten style nie pamiętam.

Ach, jeszcze drobna uwaga. Przedstawiony sposób (twój kod) nie jest najlepszy, a napewno nie należy do dobrych praktyk.

Co do pierwszego problemu, czy ten kontener slider zawiera sobie coś innego istotnego. Jeżeli nie, to po jaki kij chcesz zmienić na img?

 

komentarz 5 stycznia 2017 przez Marecki Obywatel (1,690 p.)
A mógłbyś wkleić cały kod skryptu jak by to miało wyglądać bo nie wiem w którym miejscu mam to poustawiać i wywoływać?
komentarz 5 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
function zmienslajd()
     {
        var numer = 1;
        numer++; if(numer>10) numer=1;
         
        var plik = "<img src=\"images/slider" + numer + ".JPG\" style=\"border-radius: 100%\" id=\"zdj\"/>";
         
        document.getElementById("slider").innerHTML = plik;
         $("#zdj").css("opacity","0"); // Tutaj 
        $("#zdj").fadeIn(1000); 
         
        setTimeout("zmienslajd()",6000);
        setTimeout("schowaj()",5000);
         
     }

 

komentarz 5 stycznia 2017 przez Marecki Obywatel (1,690 p.)

Nie do końca to działa z fadeIn tak jak wkleiłeś natomiast udało mi się osiągnąć to w sposób taki, że dodałem drugie opacity z wartością 1 :) oczywiście zamiast fadeIn :) czyli

$("#zdj").css("opacity","0"); // Tutaj 
        $("#zdj").animate({opacity: '1'},1000);

 

Ach, jeszcze drobna uwaga. Przedstawiony sposób (twój kod) nie jest najlepszy, a napewno nie należy do dobrych praktyk.

Dlaczego?

Co do pierwszego problemu, czy ten kontener slider zawiera sobie coś innego istotnego. Jeżeli nie, to po jaki kij chcesz zmienić na img?

Chodziło mi o to, żeby obramowanie (border) tego diva nie znikało wraz z obrazkiem. Udało się to osiągnąć na dwa sposoby bo można jeszcze ten div umieścić w drugim divie i będzie znikał tylko ten "wewnętrzny". Ale dzięki za wszelkie odpowiedzi, które okazały się pomocne :)

komentarz 6 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)

Chodziło mi o to, żeby obramowanie (border) tego diva nie znikało wraz z obrazkiem

style=\"border-radius: 100\

Przecież ten style ma img. xd . Stwórz klasę, nadaj ją dla div (kontenera) nadaj jej wartość position relative, a dla img absoulute. Spowoduje to, że element relatywny dostuje się do elementu absolutnego. I dla tego diva nadaj wartość border.

Ach, jeszcze drobna uwaga. Przedstawiony sposób (twój kod) nie jest najlepszy, a napewno nie należy do dobrych praktyk.

Dlaczego?

Po pierwsze się nie miesza czystego języka z frameworkiem xd.

Po drugie, na twoje obecne potrzeby, jQuery jest Ci zbędne. Niniejszy efekt, da rade osiągnąc podmieniając klasę CSS. (Poczytaj o animation-delay, animation,animation-forwards keyframes). nawet proste transistion powinno też dać radę. Klasy dla danego elementu DOM (czyli po stronie JS), dodajesz po przez metodę addClass w jquery a w czystym classList. Jedynie, czym powinen się zajmować JS to kontrolować prawidłowy przebieg podmiany zdjęcia, oraz nadawanie właściwych klas. 

Po trzecie, fadeIn jak i animate o odwołują się do pola style. Do style powiniśmy się odwołować gdy wartości jakie chcemy przekazać do style, są zależne od jakiegoś wynikowego kodu. Mówiąc inaczej, nie jesteśmy w stanie, ustalić stałej wartości dla danej właściwości, gdyż ona zależy od jakiegoś wyniku obliczeń (np: transform). No chyba, że bawimy się web-components, react.js. Jednakże to jest szersze zagadnienie.

Po czwarte, w tym przypadku o cross-browsing nie musimy się martwić. Jest to typowy standard ECMA.

https://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle

Mówiąc, inaczej zostało narzucone dla wszystkich przeglądarek, jednoznaczne rozumienie tej wartośći.

Po piąte, używanie jQuery czy to po przez css(), animate(). czy natywnym języku jest przydatne gdy, tworzymy opragromowanie dla kogoś, przez co nie mamy pewności, że odpowiednie klasy CSS zostały zaimplementowane.

Po szóste uruchomiłeś wielką machinerię, dla dwóch linijek kodu xd.

 

 

 

 

 

komentarz 6 stycznia 2017 przez Marecki Obywatel (1,690 p.)

Przecież ten style ma img. xd .

 Nie rozumiem  zdania, możesz wyjaśnić?:)

komentarz 6 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
style=\"border-radius: 100%\

O to mi chodziło, no chyba, że ustawiłeś tą wartość by mieć ładne zaokrąglone zdjęcia :).

komentarz 6 stycznia 2017 przez Marecki Obywatel (1,690 p.)
Tak
komentarz 6 stycznia 2017 przez Marecki Obywatel (1,690 p.)

Stwórz klasę, nadaj ją dla div (kontenera) nadaj jej wartość position relative, a dla img absoulute. Spowoduje to, że element relatywny dostuje się do elementu absolutnego. I dla tego diva nadaj wartość border.

Tutaj też nie wiem o co Ci chodzi... może jakiś kod? :) 

komentarz 7 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
komentarz 7 stycznia 2017 przez Marecki Obywatel (1,690 p.)
Ok. Element dopasowuje się do wielkości zawartości. A czemu jeśli ustawię dla obydwu elementów position: absolute; to to się "rozjedzie"?
komentarz 7 stycznia 2017 przez Marecki Obywatel (1,690 p.)
Dobra chyba już rozumiem dlaczego tak się dzieje.
komentarz 7 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
Dopasują się do swojego rodzica, tym wypadku chyba body :).
komentarz 8 stycznia 2017 przez Marecki Obywatel (1,690 p.)
img z  position absolute dopasuje się do slidera z position absolute :)
komentarz 9 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
edycja 9 stycznia 2017 przez ShiroUmizake
Tak tylko tu zostawię :)

->>http://webkod.pl/kurs-css/wlasciwosci/wszystkie/position#absolute

Przykład:

https://jsfiddle.net/n8zpnzgd/2/

Zastanów się dlaczego nie mogę go, wyśrodkować, W końcu jest zamknięty w innym pudełku :).
komentarz 9 stycznia 2017 przez Marecki Obywatel (1,690 p.)
Dopasowuje się do body :) Poza tym nie działa margin: auto; ponieważ ma pozycję absolutną, która to sprawia, że element "nie zajmuje miejsca w dokumencie" tak jak statyczny element czyli mimo, iż jest zamknięty w innym pudełku to jeśli nie jest w innym pudełku z pozycją absolute relative lub fixed dopasuje się do body :)
komentarz 9 stycznia 2017 przez ShiroUmizake Nałogowiec (46,300 p.)
Zgadza się. Więc, dlaczego lepiej, żeby 2 elementy nie miały position absolute?
komentarz 9 stycznia 2017 przez Marecki Obywatel (1,690 p.)
jak dla mnie to mogą mieć jeśli rozważnie ułożę elementy w sobie, ale dlaczego Twoim zdaniem to nie wiem :)

Podobne pytania

0 głosów
1 odpowiedź 260 wizyt
pytanie zadane 26 października 2016 w JavaScript przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 27 listopada 2016 w JavaScript przez Dooki Nowicjusz (200 p.)
0 głosów
1 odpowiedź 184 wizyt

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...