krouzek:slideshow

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revize Předchozí verze
Následující verze		 Předchozí verze
krouzek:slideshow [2020/02/05 17:42] – adminkrouzek:slideshow [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
Řádek 23: Řádek 23:
 </code> </code>
  
-====  ====+==== Plánovací rekurze ====
  
 <code javascript> <code javascript>
Řádek 33: Řádek 33:
  
 X() X()
 +</code>
 +
 +
 +==== Plánování jiné ====
 +
 +<code javascript>
 +
 +function X(){
 +    console.log(new Date())
 +}
 +
 +//setInterval naplánuje opakování každých 1000ms
 +setInterval(X,1000)
 +</code>
 +
 +
 +
 +==== Minimální slideshow ====
 +
 +<code javascript>
 +//existuje <img id="slideshow"> v html
 +
 +//
 +var cislo_obrazku = 1;
 +
 +function prepniObrazek(){
 +document.getElementById("slideshow").src= cislo_obrazku +".jpg"
 +//0, 1, 2
 +cislo_obrazku = (cislo_obrazku+1) % 3;
 +
 +}
 +
 +//setInterval naplánuje opakování každých 1000ms
 +setInterval(prepniObrazek,5000)
 +</code>
 +
 +==== Fadein,fadeout ====
 +<code html>
 +<!DOCTYPE html>
 +<html>
 +<head>
 +<style> 
 +div {
 +  width: 100px;
 +  height: 100px;
 +  background-color: red;
 +  }
 +
 +.fadeout {
 +  animation-name: fadeout;
 +  animation-duration: 4s;
 +  animation-fill-mode: forwards;
 +}
 +
 +.fadein {
 +  animation-name: fadein;
 +  animation-duration: 4s;
 +  animation-fill-mode: forwards;
 +}
 +
 +@keyframes fadeout {
 +  from {opacity:1;}
 +  to {opacity:0;}
 +}
 +@keyframes fadein {
 +  from {opacity:0;}
 +  to {opacity:1;}
 +}
 +</style>
 +</head>
 +<body>
 +
 +<div class="fadein" id="ctverec"></div>
 +
 +<script>
 +setTimeout(function(){
 +document.getElementById('ctverec').classList.remove("fadein");
 +document.getElementById('ctverec').classList.add("fadeout");
 +
 +},5000)
 +</script>
 +
 +</body>
 +</html>
 +
 </code> </code>
  
  • krouzek/slideshow.1580924545.txt.gz
  • Poslední úprava: 2023/11/15 20:54
  • (upraveno mimo DokuWiki)