0
Ich bin eine sehr einfache HTML-und Javascript-Slideshow codieren. Beim ersten Laden der Seite lädt die Seite die einzelnen Folien jedoch übereinander. Wenn Sie jedoch auf den Pfeil klicken, verschwinden die Folien und die aktuelle Folie erscheint und funktioniert regelmäßig.HTML Javascript Slideshow funktioniert nicht
The Slide Show before Clicking the arrow
The Slide Show after clicking the arrow
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script language="javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
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>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1/5</div>
<img src="img/hispanic1.png" alt="dancers performing" style="width:100%" >
<div class="text">Hispanic dancers performing at the Hispanic Heritage Festival</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2/5</div>
<img src="img/pinkribbon2.png" alt="pink ribbon" style="width:100%">
<div class="text">Come support Breast Cancer Awareness Month at Santa Fe</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3/5</div>
<img src="img/bloodbus1.png" alt="Blood Drive Bus" style="width:100%">
<div class="text">Come donate blood for our Halloween Event!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">4/5</div>
<img src="img/volunteer1.png" alt="Volunteers Pointing" style="width:100%">
<div class="text">Volunteer with a wonderful organization at our Volunteer Fair!</div>
</div>
<div class="mySlides fade">
<div class="numbertext">5/5</div>
<img src="img/clubrush1.png" alt="Girls rugby table" style="width:100%">
<div class="text">Come out and join a club at Club Rush!</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<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>
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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);
}
/* Caption text */
.text {
color: #f2f2f2;
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;
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
Hoffentlich konnte ich alles richtig zu formatieren. Danke für jede Hilfe!
leider hat es nicht funktioniert. Die Pfeile funktionieren nicht und es zeigt jedes einzelne Bild an. Ich werde weiter daran basteln und sehen, ob es funktioniert. – evinwithani