BilderSlideShow soll automatisch weiter blättern. Sript komplettieren! bearbeitet von Manuel 04.03.2020 00:44 Hi. Folgendes, habe endlich geschafft, dass ein HtmlSript Bilder in voller Höhe und voller breite, mittig, ohne verzerren, weiter per anklicken des Bildes -angezeigt wird in einer BilderShow. Kann auch WebSeiten laden. Fehlt noch, das Script soll automatisch weiter blättern nach 4 Sekunden! Speziell für WebSeiten wär es gut wenns weitergeht zB. Seite mit Foto+Text, den Browser automatisch übersetzen kann. Die kann man nicht per anklicken weiter blättern, also bleibt man irgendwann stehen auf einer Folie. ---> Soll immer vorwärts weiter! Hier aktueller BearbeitungsStand (ohne automatisches WeiterBlättern)_ ~~~ HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome!</title> <style> *{margin:0px; padding:0px;height: 100%;top:0px;left:0px;right:0px;bottom:0px; } </style> </head> <body style=" margin:0px; padding:0px; border:none; outline: none; height: 100%; background-color:rgba(16,32,128,0.1); overflow: hidden; "> <div class="SlideBox" style=" margin-left: auto; margin-right: auto; box-sizing: inherit; position: relative; "> <style> .FotoShow { width: 100%; margin-left: auto; margin-right: auto; vertical-align: middle; object-fit: cover; display: block; background-size: cover; } </style> <img class="FotoShow" src="Favor1.gif"> <img class="FotoShow" src="Favor2.jpg"> <img class="FotoShow" src="Favor3.jpg"> <iFrame class="FotoShow" src="Service.html"></iFrame> <script> window.onload = function(){ var slideIntro = document.getElementsByClassName("FotoShow"); var myIndex = 2; for(var a = 0; a < slideIntro.length; a++){ if(a > 0){ slideIntro[a].style.display = "none"; } slideIntro[a].addEventListener("click", carousel); } function carousel() { var i; var slideIntro = document.getElementsByClassName("FotoShow"); for (i = 0; i < slideIntro.length; i++) { slideIntro[i].style.display = "none"; } if (myIndex > slideIntro.length){ myIndex = 1; } slideIntro[myIndex - 1].style.display = "block"; myIndex++; } } </script> </div> </body> </html> ~~~ Vielen Dank für Lösung.
BilderSlideShow soll automatisch weiter blättern. Sript komplettieren! bearbeitet von Matthias Scharwies 04.03.2020 03:25 Hi. Folgendes, habe endlich geschafft, dass ein HtmlSript Bilder in voller Höhe und voller breite, mittig, ohne verzerren, weiter per anklicken des Bildes -angezeigt wird in einer BilderShow. Kann auch WebSeiten laden. Fehlt noch, das Script soll automatisch weiter blättern nach 4 Sekunden! Speziell für WebSeiten wär es gut wenns weitergeht zB. Seite mit Foto+Text, den Browser automatisch übersetzen kann. Die kann man nicht per anklicken weiter blättern, also bleibt man irgendwann stehen auf einer Folie. ---> Soll immer vorwärts weiter! Hier aktueller BearbeitungsStand (ohne automatisches WeiterBlättern)_ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome!</title> <style> *{margin:0px; padding:0px;height: 100%;top:0px;left:0px;right:0px;bottom:0px; } </style> </head> <body style=" margin:0px; padding:0px; border:none; outline: none; height: 100%; background-color:rgba(16,32,128,0.1); overflow: hidden; "> <div class="SlideBox" style=" margin-left: auto; margin-right: auto; box-sizing: inherit; position: relative; "> <style> .FotoShow { width: 100%; margin-left: auto; margin-right: auto; vertical-align: middle; object-fit: cover; display: block; background-size: cover; } </style> <img class="FotoShow" src="Favor1.gif"> <img class="FotoShow" src="Favor2.jpg"> <img class="FotoShow" src="Favor3.jpg"> <iFrame class="FotoShow" src="Service.html"></iFrame> <script> window.onload = function(){ var slideIntro = document.getElementsByClassName("FotoShow"); var myIndex = 2; for(var a = 0; a < slideIntro.length; a++){ if(a > 0){ slideIntro[a].style.display = "none"; } slideIntro[a].addEventListener("click", carousel); } function carousel() { var i; var slideIntro = document.getElementsByClassName("FotoShow"); for (i = 0; i < slideIntro.length; i++) { slideIntro[i].style.display = "none"; } if (myIndex > slideIntro.length){ myIndex = 1; } slideIntro[myIndex - 1].style.display = "block"; myIndex++; } } </script> </div> </body> </html> Vielen Dank für Lösung.
nicht angemeldet
