| Autor | Zpráva | ||
|---|---|---|---|
| WencaTv Profil |
#1 · Zasláno: 17. 9. 2016, 22:39:52
Zdravím, jsem začátečník a mám takový problém, když načtu poprvé svou stránku, tak se slider jakoby rozpadne (přesněji: obrázky se dají pod sebe, viz. url) a trvá to do první změny.
Zde problém CSS: .slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 0;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: #22c398;
}
.text {
color: white;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
.dot {
cursor:pointer;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #262626;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #22c398;
}
@media only screen and (max-width: 300px) {
.slprev, .slnext,.text {font-size: 11px}
}Java: var slideIndex = 1,
playAuto = true, /* playAuto = false; <-- K zastavení AUTOPLAY */
s = 1, /* Počet sekund k zopakování obrázku */
sliderFunction = setInterval(function showSlides(n) {
"use strict";
var i,
slides = document.getElementsByClassName("mySlides"),
dots = document.getElementsByClassName("dot");
n = slideIndex;
if (n > slides.length) { slideIndex = 1; }
if (n < 1) { slideIndex = slides.length; }
for (i = 0; i < slides.length; i += 1) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i += 1) {
dots[i].classList.remove("active");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].classList.add("active");
slideIndex += 1;
checkIfIsAuto();
}, 3* 1000);
function plusSlides(n) {
"use strict";
showSlides(slideIndex += n);
}
function currentSlide(n) {
"use strict";
showSlides(slideIndex = n);
}
function checkIfIsAuto() {
"use strict";
if (playAuto !== true) { clearInterval(sliderFunction); }
}Dále by mě pak ještě zajímalo, jak přidat slidu nijaký efekt. Předem děkuji za všechny rady. |
||
| juriad Profil |
#2 · Zasláno: 18. 9. 2016, 16:54:08
WencaTv:
Zobrazí všechny obrázky pod sebou, protože všechny mají display: block, a to až do doby než se provede první update. Musíš tedy zajistit nějakou inicializaci, která projde všechny obrázky a až na jeden všechny skryje. (Nebo udělá něco chytřejšího, čti dál.) Přidání efektů je složité. Efekt spočívá v tom, že se bude zobrazovat několik obrázků zároveň. Jak to udělat? Vždy budeš potřebovat nastavit position: absolute (tak se budou moci překrývat). Změříš si velikost obrázků a kontejneru nastavíš přesnou velikost (protože by ji jinak ztratil). Prolínačka: vybrat pomocí z-indexu ten, který má být navrch, kterému budeš dále pomocí opacity měnit průhlednost. Odsouvačka: budeš měnit obrázkům pozici left (případně top). Kontejneru nastavíš overflow: hidden. Slider můžeš rozdělit na několik částí z pohledu HTML: kontejner, obrázky, tlačítka, tečky Dále z pohledu JS: * init (nastaví velikost kontejneru, nastaví vlastnosti obrázků, nastaví reakce na tlačítka, reakce na tečky) * smyčka (každých sekund zavolá funkci na změnu obrázku; je možné při hoveru třeba zabrzdit slider) * změna (funkce, která dostane dva čísla obrázků: aktuální a nový, a dostane také callback, který řekne slideru, že se již změnil obrázek) Ty jsi doposud vlastně naprogramoval jen tu smyčku, přičemž tvé řešení má spoustu problémů s časováním. Ta důležitá část pro efekty je ta funkce změny (pokud nemáš efekty, tak prostě jen nastaví viditelný obrázek, ale obecně funguje nad dvěma obrázky). Na ty tlačítka a tečky můžeš v první fázi zapomenout. Stejně tak ti radím, abys ze začátku vyhodil ten časovač, protože něco takto primitivního nebude fungovat dobře. Tvým cílem je: var kontejner = document.getElementById('slider1');
function zmena(puvodni, novy, hotovo) {
// začni něčím jako:
// puvodni.display = none;
// novy.display = show;
// hotovo(novy);
// až to budeš mít hotové, můžeš tuto část nahradit něčím efektnějším
}
var slider = initSlider(kontejner, zmena);
// funkce initSlider vrací objekt, skrze který se celý slider řídí
// {
// kontejner: ...
// obrazky: [...]
// aktualni: 0
// setSlide(novy) {zmena(aktualni, novy, function(novy) {aktualni = novy;})}
//}
slider.setSlide(4); // zahájí změnu slidu, až bude změna provedená (nemusí být okamžitě) zavolá se funkce hotovo, která změní stav slideru. |
||
| WencaTv Profil |
#3 · Zasláno: 20. 9. 2016, 19:00:35
juriad:
Proč by ten časovač neměl fungovat ? |
||
|
Časová prodleva: 8 let
|
|||
0