Image slider pomocou javascriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama

Image slider pomocou javascriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.comImage slider pomocou javascriptu – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Koder0
Newbie
8. 12. 2016   #1
-
0
-

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

Nahlásit jako SPAM
IP: 178.41.137.–
Reklama
Reklama
peter
~ Anonymní uživatel
2840 příspěvků
Nahlásit jako SPAM
IP: 2001:718:2601:26c:f08b:d5...–
peter
~ Anonymní uživatel
2840 příspěvků
9. 12. 2016   #3
-
0
-

   

<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>
Nahlásit jako SPAM
IP: 2001:718:2601:26c:f08b:d5...–
Koder0
Newbie
13. 12. 2016   #4
-
0
-

Dakujem, nieco podobne som potreboval  :)

Nahlásit jako SPAM
IP: 178.41.137.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 24 hostů

Podobná vlákna

Image slider — založil jordi1811

Slider problém — založil jAkErCZ

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032017 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý