Manuel: BilderSlideShow soll automatisch weiter blättern. Sript komplettieren!

Beitrag lesen

SELF-Forum

BilderSlideShow soll automatisch weiter blättern. Sript komplettieren!

Manuel (Versionen)
– Informationen zu den Bewertungsregeln

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.

Beitrag melden
–
Informationen zu den Bewertungsregeln