TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Caute vsichni. Pustil som sa do vytvarania mojho prveho image slidera svojpomocne.
To co som dokazal vytvorit vyzera zatial, takto:
https://jsfiddle.net/aoLyk6px/
Chcel by som dosiahnut aby linky s nazvami one, two, three, four sa zvyraznovali podla aktualneho obrazka. Plus som to skusal nejak rozpohybovat aby sa obrazky posuvali samostatne klasicka slideshow, ale to sa mi tiez nepodarilo. AK by niekto vedel pomoct a najst si chvilku cas budem vdacny, diky
Newbie
Nahlásit jako SPAM
IP: 178.41.137.–
<html>
<head>
<meta http-equiv="Content-Language" content="cs">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>JS Jednoduchá animace jako Marquee</title>
<script>
var X = 0; // aktualni pozice X
var Y = 0; // aktualni pozice Y
var smerX = 1; // -1 / 0 / +1
var smerY = 0; // -1 / 0 / +1
var krokX = 7; // +7
var krokY = 0; // +0
var rychlost = 100; // rychlost opakovani v ms
var casovac = null; // promenna, kam je ulozen casovac
function animaceStart()
{
animaceStop(); // zastav casovac v pripade, ze uz bezi, jinak se vam spusti dva a vice najednou :)
casovac = window.setInterval("animaceKrok()", rychlost); // spust opakovanym casovacem kazdych 100 ms funkci pohybKrok()
}
function animaceStop()
{
clearTimeout(casovac); // zastavi casovac
}
function animaceKrok()
{
// zmen souradnice pohybu
X += smerX * krokX; // kruhovy pohyb je X = stredX + R * sin(t); Y = stredY + R * sin(t);
Y += smerY * krokY; // krok = Math.PI / 45; t+=krok
// ohranic prostor pohybu
if (X<krokX) {smerX = 1;}
if (X>(400-krokX)) {smerX = -1;}
// premisti prvek
var prvek = document.getElementById("textik");
prvek.style.left = X + "px";
prvek.style.top = Y + "px";
}
</script>
</head>
<body>
<h2>Jednoduchá animace jako Marquee</h2>
<!-- absolutni prvek by mel byt ohraniceny prostorem s relativni pozici -->
<div style="position:relative; height:1em;">
<span id="textik" style="position:absolute;">Text, který se pohybuje</span>
</div>
<script>
animaceStart(); // spusteni animace
</script>
<form>
<p>
<input type="button" value="Změnit směr" onclick="smerX = -smerX;">
<input type="button" value="Start" onclick="animaceStart();">
<input type="button" value="Stop" onclick="animaceStop();" >
</p>
</form>
<h3>Co se má stát?</h3>
<p>Při spuątění stránky se začne text pohybovat doprava. Při překročení
(400px + krok) se změní směr a text se začne vracet zpět.
Směr lze dále ovlivnit tlačítkem Změnit směr. A celou animaci lze zastavit
nebo spustit tlačítky Start a Stop.</p>
</body>
</html>
Zjistit počet nových příspěvků
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
© 2003–2024 Programujte.com