zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Html Slideshow funktioniert nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.08.2018, 16:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.08.2018
Beiträge: 1
J.Doe befindet sich auf einem aufstrebenden Ast
Standard Html Slideshow funktioniert nicht

Hallo,
meine Slideshow funktioniert nicht und ich finde die Lösung nicht.
Danke für eure Hilfe

Code:
 <html lang="de">                
	        <head>
		<meta charset="UTF-8">
		<script type="text/javascript">
			var slideIndex = 1;
			showSlides(slideIndex);

			// Next/previous controls
			function plusSlides(n) {
			  showSlides(slideIndex += n);
			}

			// Thumbnail image controls
			function currentSlide(n) {
			  showSlides(slideIndex = n);
			}

			function showSlides(n) {
			  var i;
			  var slides = document.getElementsByClassName("mySlides");
			  var dots = document.getElementsByClassName("dot");
			  if (n > slides.length) {slideIndex = 1} 
 			 if (n < 1) {slideIndex = slides.length}
 			 for (i = 0; i < slides.length; i++) {
 			     slides[i].style.display = "none"; 
 			 }
 			 for (i = 0; i < dots.length; i++) {
 			     dots[i].className = dots[i].className.replace(" active", "");
 			 }
			  slides[slideIndex-1].style.display = "block"; 
			  dots[slideIndex-1].className += " active";
			}
		</script>
	</head>
	<body>
		<style>
			#logo {
				width: 214px;
				height: 54px;
				position:absolute;
			}
			
			h1 {
				text-align:center;
				margin:15px 0 20px 0;
				text-decoration:underline
			}
			
			{box-sizing:border-box}

			/* Slideshow container */
			.slideshow-container {
				max-width: 1000px;
				position: relative;
				margin: auto;
			}
			.red{
			    color:firebrick;
			}
			.bru{
 			   color:red;
			}
			body{
			    background:white;
			}

			/* Hide the images by default */
			.mySlides {
			    display: none;
			}

			/* Next & previous buttons */
			.prev, .next {
			  cursor: pointer;
			  position: absolute;
			  top: 50%;
			  width: auto;
			  margin-top: -22px;
			  padding: 16px;
			  color: white;
			  font-weight: bold;
 			 font-size: 18px;
 			 transition: 0.6s ease;
 			 border-radius: 0 3px 3px 0;
			}

			/* Position the "next button" to the right */
			.next {
			  right: 0;
			  border-radius: 3px 0 0 3px;
			}

			/* On hover, add a black background color with a little bit see-through */
			.prev:hover, .next:hover {
			  background-color:  rgba(0,0,0,0.8);
			}
			img{
			    width:100%;
			    height:185px;
			}
			/* Caption text */
			.text {
 			 color: lightskyblue;
 			 font-size: 15px;
 			 padding: 8px 12px;
			  position: absolute;
			  bottom: 8px;
 			 width: 100%;
 			 text-align: center;
			}

			/* Number text (1/3 etc) */
			.numbertext {
			  color: #f2f2f2;
 			 font-size: 12px;
 			 padding: 8px 12px;
 			 position: absolute;
 			 top: 0;
			}

			/* The dots/bullets/indicators */
			.dot {
 			 cursor: pointer;
 			 width:9;
 			height:9px; 
			 border-radius:50%;
 
			  background-color: #bbb;
			  display: inline-block;
  			transition: background-color 0.6s ease;
			}

			.active, .dot:hover {
			  background-color:  black;
			}

			/* Fading animation */
			.fade {
			  -webkit-animation-name: 
			fade;
 			 -webkit-animation-duration: 1.5s;
 			 animation-name: fade;
 			 animation-duration: 1.5s;
			}

			@-webkit-keyframes fade {
 			 from {opacity: .0001} 
			  to {opacity: 1}
			}

			@keyframes fade {
			  from {opacity: .0001} 
			  to {opacity: 1}
			}
			b{
   			 color:black;
			}
		</style
		</style>		
		<div class="logo">
			<img src="bilder/logo.jpg" id="logo" alt="" />
		<div class="h1">
		<h1>Heading</h1>
		</div>		
		<hr width=100%/>
		<br/>
		vorstellungen vom beruf,wahl des berufs
		<div class="slideshow-container">

  			<!-- Full-width images with number and caption text -->
  			<div class="mySlides fade">
   			 <div  class="numbertext">1 / 5</div>
    			<img src="bilder/logo.jpg" style="width:100%">
   			 <div  class="text"><b>Can You See The Beautifull Of Them?</b></div>
  			</div>

  			<div class="mySlides fade">
   			 <div  class="numbertext">2 / 5</div>
   			 <img src="bilder/standorte.jpg"style="width:100%">
  			  <div  class="text"><b>Look At Him... Lonely...</b></div>
  			</div>

 			 <div class="mySlides fade">
 			   <div  class="numbertext">3 / 5</div>
 			   <img src="bilder/standorte.jpg" style="width:100%">
   			 <div  class="text"><b class="bru">This Is One Of My Favourtie flying Night Animal Sadly They Almost Gone...</b></div>
 			 </div>

 			 <div class="mySlides fade">
 			   <div  class="numbertext">4 / 5</div>
 			   <img src="bilder/standorte.jpg" style="width:100%">
			    <div  class="text"><b>ahh... what a happy family.
			    </b></div>
			  </div>

			  <div class="mySlides fade">
			    <div  class="numbertext">5 / 5</div>
			    <img src="bilder/standorte.jpg" style="width:100%">
			    <div  class="text"><b>Eagle... How Many Exist?
  			  </b></div>
 			 </div>

 			 <!-- Next and previous buttons -->
 			 <a class="prev"  onclick="plusSlides(-1)">❮</a>
 			 <a class="next"  onclick="plusSlides(1)">❯</a>
			</div>
			<br>

			<!-- The dots/circles -->
			<div style="text-align:center">
 			 <span class="dot"  onclick="currentSlide(1)"></span> 
 			 <span class="dot"  onclick="currentSlide(2)"></span> 
 			 <span class="dot"  onclick="currentSlide(3)"></span> 
 			 <span class="dot" onclick="currentSlide(4)"></span>
 			 <span class="dot" onclick="currentSlide(5)"></span>
		</div>
	</body>
</html>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.08.2018, 19:27
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 23.01.2018
Beiträge: 142
basti1012 befindet sich auf einem aufstrebenden Ast
Standard

Ist zwar falsches Thema aber egal. Pack mal dein Script am ende des Scriptes und nicht in den head Bereich. Weil das Script sucht da nach Klassen die noch gar nicht exestieren,deswegen muß das Script ans Ende des Documents.

Dann sieht das so aus
https://codepen.io/basti1012/pen/qMWOdb
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, html, javascript, slideshow

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wie funktioniert der overflow: hidden? Oder warum funktioniert er nicht? ChaosZarth CSS 4 22.06.2013 14:01
Verlinkung in einer Slideshow funktioniert nicht beyou CSS 1 16.10.2012 20:15
DIV immer ganze Breite - normal?!?!? csski CSS 3 02.07.2008 12:20
Wie parse ich mit php Markdown syntax nach html? asdfgqw Serveradministration und serverseitige Scripte 0 03.06.2008 00:11
Das Blockelement(?) html sjBlack CSS 2 27.05.2008 00:59


Alle Zeitangaben in WEZ +2. Es ist jetzt 03:24 Uhr.